Autoplay Ethos Header

Hi, can you show me how to make ethos header carousel become autoplay?

Thank you.

Hi there,

You will need a code customization to do so. We will be able to give you proper steps to do that but you need to implement the feature yourself. Follow the steps below:

  1. Install the Child Theme for the customization.
  2. Copy this file wp-content/themes/x/framework/legacy/cranium/headers/views/ethos/_post-carousel.php to wp-content/themes/x-child/framework/legacy/cranium/headers/views/ethos/_post-carousel.php. You will need to create the necessary folders inside your child theme.
  3. Change the code of the newly copied file in the Child Theme to:
<?php

// =============================================================================
// VIEWS/ETHOS/_POST-CAROUSEL.PHP
// -----------------------------------------------------------------------------
// Outputs the post carousel that appears at the top of the masthead.
// =============================================================================

GLOBAL $post_carousel_entry_id;

$post_carousel_entry_id = get_the_ID();

$is_enabled = x_get_option( 'x_ethos_post_carousel_enable' ) == '1';
$count      = x_get_option( 'x_ethos_post_carousel_count' );
$display    = x_get_option( 'x_ethos_post_carousel_display' );

switch ( $display ) {
  case 'most-commented' :
    $args = array(
      'post_type'      => 'post',
      'posts_per_page' => $count,
      'orderby'        => 'comment_count',
      'order'          => 'DESC'
    );
    break;
  case 'random' :
    $args = array(
      'post_type'      => 'post',
      'posts_per_page' => $count,
      'orderby'        => 'rand'
    );
    break;
  case 'featured' :
    $args = array(
      'post_type'      => 'post',
      'posts_per_page' => $count,
      'orderby'        => 'date',
      'meta_key'       => '_x_ethos_post_carousel_display',
      'meta_value'     => 'on'
    );
    break;
}

?>

<?php if ( $is_enabled ) : ?>

  <ul class="x-post-carousel unstyled">

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

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

        <li class="x-post-carousel-item">
          <?php x_ethos_entry_cover( 'post-carousel' ); ?>
        </li>

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

    <?php wp_reset_query(); ?>

    <script>

    jQuery(document).ready(function() {
      jQuery('.x-post-carousel').slick({
        speed          : 500,
        slide          : 'li',
        slidesToShow   : <?php echo x_get_option( 'x_ethos_post_carousel_display_count_extra_large' ); ?>,
        slidesToScroll : 1,
        autoplay       : true,
        autoplaySpeed  : 2000,
        rtl            : <?php echo json_encode( is_rtl() ); ?>,
        responsive     : [
          { breakpoint : 1500, settings : { speed : 500, slide : 'li', slidesToShow : <?php echo x_get_option( 'x_ethos_post_carousel_display_count_large' ); ?> } },
          { breakpoint : 1200, settings : { speed : 500, slide : 'li', slidesToShow : <?php echo x_get_option( 'x_ethos_post_carousel_display_count_medium' ); ?> } },
          { breakpoint : 979,  settings : { speed : 500, slide : 'li', slidesToShow : <?php echo x_get_option( 'x_ethos_post_carousel_display_count_small' ); ?> } },
          { breakpoint : 550,  settings : { speed : 500, slide : 'li', slidesToShow : <?php echo x_get_option( 'x_ethos_post_carousel_display_count_extra_small' ); ?> } }
        ]
      });
    });

    </script>

  </ul>

<?php endif; ?>

In the code above search for autoplaySpeed. You can change 2000 to whatever value you like in milliseconds for the speed of the autoplay.

Thank you.

It works perfectly! Thank you!

Glad that we could be of a help :slight_smile:

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