Ethos Carousel Autoplay

Hello team,

I am opening a new topic again since the previous one I wrote into got closed because I was not fast enough with replying(Sorry about that, it can be deleted if you can do that). I am still not able to get the carousel to autoplay. I tried several ways to achieve this:

  1. (Autoplay Ethos Header) If I use the code provided in this thread to make the Ethos Carousel autoplay, I see the following error in the console:

jquery.min.js?ver=3.5.1:2 jQuery.Deferred exception: jQuery(…).slick is not a function TypeError: jQuery(…).slick is not a function
at HTMLDocument. (https://www.tierramitica.com/:543:34)
at e (https://www.tierramitica.com/wp-includes/js/jquery/jquery.min.js?ver=3.5.1:2:30005)
at t (https://www.tierramitica.com/wp-includes/js/jquery/jquery.min.js?ver=3.5.1:2:30307) undefined
S.Deferred.exceptionHook @ jquery.min.js?ver=3.5.1:2
jquery.min.js?ver=3.5.1:2 Uncaught TypeError: jQuery(…).slick is not a function
at HTMLDocument. ((index):543)
at e (jquery.min.js?ver=3.5.1:2)
at t (jquery.min.js?ver=3.5.1:2)

  1. When I try older methods (https://theme.co/archive/forums/topic/ethos-carousel-autoplay/), I receive no errors, but also the carousel does not autoplay.

I tried to put the code from the second option directly into the x theme instead of in my child theme - to see if at least that would work, but also nothing happens.

What I want to achieve is for the carousel to start rolling on the top without having to click on the little arrows to the side. Could you please have one more look at this?

Thank you again for all the help!

Hello @Tierramitica,

Thanks for writing in!

This is the updated contents of the _post-carousel.php file:

<?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 ) : ?>

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

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

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

      <?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; ?>

      <script>

      jQuery(document).ready(function() {
        jQuery('.x-post-carousel').xSlick({
          speed          : 500,
          slide          : 'li',
          slidesToShow   : <?php echo x_get_option( 'x_ethos_post_carousel_display_count_extra_large' ); ?>,
          slidesToScroll : 1,
          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; ?>

  <?php wp_reset_query(); ?>

<?php endif; ?>

Adding the two lines should work for you:

        autoplay       : true,
        autoplaySpeed  : 2000,

Make sure that your X theme and Cornerstone are up to date. Our latest versions are:

  • X theme 8.2.3
  • Cornerstone 5.2.3
  • WordPress 5.7
  • PHP 7.4

This latest release contains fixes for several issues so be sure to check out the changelog:

After doing the updates, always remember to clear all caches (if you are using WP Rocket, WP SuperCache or W3 Total Cache) when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Please let us know how it goes.

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