How do I change the duration of slides in Ethos Post Slider

Support
#1

Hi, I would like to be able to change the amount of time that the Ethos Post Slider displays each slide. Right now it is around 10 seconds per slide, and I’d like each slide to last about 5 seconds. Can anyone help me figure out how to change this? Thanks in advance.

#2

Hi There,

Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Then navigate to your child theme’s /framework/view/ethos/ directory create a file named _post-slider.php and paste the code below:

<?php

// =============================================================================
// VIEWS/ETHOS/_POST-SLIDER.PHP
// -----------------------------------------------------------------------------
// Outputs the post slider that appears at the top of the blog.
// =============================================================================

$is_blog    = is_home();
$is_archive = is_category() || is_tag();

if ( $is_blog || $is_archive ) :

  if ( $is_blog ) {
    $info = array( 'blog', NULL, NULL, '_x_ethos_post_slider_blog_display' );
  } elseif ( $is_archive ) {
    $type = ( is_category() ) ? 'cat' : 'tag_id';
    $info = array( 'archive', $type, get_queried_object_id(), '_x_ethos_post_slider_archives_display' );
  }

  $slider_enabled = x_get_option( 'x_ethos_post_slider_' . $info[0] . '_enable' ) == '1';
  $count          = x_get_option( 'x_ethos_post_slider_' . $info[0] . '_count' );
  $display        = x_get_option( 'x_ethos_post_slider_' . $info[0] . '_display' );

  $blog_slider_is_enabled    = $slider_enabled && $is_blog;
  $archive_slider_is_enabled = $slider_enabled && $is_archive;
  $is_enabled                = $blog_slider_is_enabled || $archive_slider_is_enabled;

  switch ( $display ) {
    case 'most-commented' :
      $args = array(
        'post_type'      => 'post',
        'posts_per_page' => $count,
        'orderby'        => 'comment_count',
        'order'          => 'DESC',
        $info[1]         => $info[2]
      );
      break;
    case 'random' :
      $args = array(
        'post_type'      => 'post',
        'posts_per_page' => $count,
        'orderby'        => 'rand',
        $info[1]         => $info[2]
      );
      break;
    case 'featured' :
      $args = array(
        'post_type'      => 'post',
        'posts_per_page' => $count,
        'orderby'        => 'date',
        'meta_key'       => $info[3],
        'meta_value'     => 'on',
        'ignore_sticky_posts'	=> true
      );
      break;
  }

  ?>

  <?php if ( $is_enabled ) : ?>

    <?php $wp_query = new WP_Query( $args ); ?>

    <?php if ( $wp_query->post_count > 0 ) : ?>

      <div class="x-flexslider x-post-slider">
        <ul class="x-slides">

          <?php if ( $wp_query->have_posts() ) : ?>
            <?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>

              <li class="x-slide">
                <article <?php post_class( 'x-post-slider-entry' ); ?> style="<?php echo x_ethos_entry_cover_background_image_style(); ?>">
                  <a href="<?php the_permalink(); ?>">
                    <div class="cover">
                      <div class="middle">
                        <span class="featured-meta"><?php echo x_ethos_post_categories(); ?> / <?php echo get_the_date( 'F j, Y' ); ?></span>
                        <h2 class="h-featured"><span><?php x_the_alternate_title(); ?></span></h2>
                        <span class="featured-view"><?php _e( 'View Post', '__x__' ); ?></span>
                      </div>
                    </div>
                  </a>
                </article>
              </li>

            <?php endwhile; ?>
          <?php endif; ?>

        </ul>
      </div>

      <script>
        jQuery(window).load(function() {
          jQuery('.x-post-slider').flexslider({
            controlNav   : false,
            selector     : '.x-slides > li',
            prevText     : '<i class="x-icon-chevron-left" data-x-icon-s="&#xf053;"></i>',
            nextText     : '<i class="x-icon-chevron-right" data-x-icon-s="&#xf054;"></i>',
            animation    : 'fade',
            smoothHeight : true,
            slideshowSpeed: 5000,
            slideshow    : true
          });
        });
      </script>

    <?php endif; ?>

    <?php wp_reset_query(); ?>

  <?php endif; ?>

<?php endif; ?>

Please note that the 5000 means 5 seconds.

Hope it helps :slight_smile:

#3

Hi thai, thanks for your help. I’m trying to implement this now, but when I go to my child theme’s /framework/view/ folder, there is no ethos folder. Do I need to create the ethos folder here?

#4

I see the answer to this question is in the article that you referred me to with your link. Thanks! I’ll try this now to see if the fix works.

#5

That worked, thanks!

#6

Glad we were able to help you :slight_smile:

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.