note: i created another site with this particular licenses but the site is not longer live, so I was able to use this frame for a new client.

Thank you for writing in!

First, please update your theme and bundled plugins to the latest version, if you have validated your theme your theme, you can update them directly from the admin panel. Otherwise, please review our KB article on Updating Your Theme and Plugins.

After that, 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.

Next, copy the file wp-content/themes/x/framework/views/ethos/_post-carousel.php in your child theme’s folder /framework/views/ethos/, open the file in a text editor and replace entire code with following:

<?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({
        infinite       : true,
        speed          : 500,
        slide          : 'li',
        slidesToShow   : <?php echo x_get_option( 'x_ethos_post_carousel_display_count_extra_large' ); ?>,
        slidesToScroll : 1,
        autoplay       : true,
        autoplaySpeed  : 2000,
        responsive     : [
          { breakpoint : 1500, settings : { speed : 500, slide : 'li', autoplay : true, autoplaySpeed : 2000, slidesToShow : <?php echo x_get_option( 'x_ethos_post_carousel_display_count_large', '4' ); ?> } },
          { breakpoint : 1200, settings : { speed : 500, slide : 'li', autoplay : true, autoplaySpeed : 2000, slidesToShow : <?php echo x_get_option( 'x_ethos_post_carousel_display_count_medium', '3' ); ?> } },
          { breakpoint : 979,  settings : { speed : 500, slide : 'li', autoplay : true, autoplaySpeed : 2000, slidesToShow : <?php echo x_get_option( 'x_ethos_post_carousel_display_count_small', '2' ); ?> } },
          { breakpoint : 550,  settings : { speed : 500, slide : 'li', autoplay : true, autoplaySpeed : 2000, slidesToShow : <?php echo x_get_option( 'x_ethos_post_carousel_display_count_extra_small', '1' ); ?> } }
        ]
      });
    });

    </script>

  </ul>

<?php endif; ?>

Hope this helps. 🙂

Thank you.

http://churchillandpartners2015.com.gridhosted.co.uk/

To make slide animation smoother, increase every instance of 500 from the code to your desired value in mili-seconds. For example, use 2000 for 2 seconds animation.

Thank you!

Do you mean continuously rotating the slider?

These lines of code in the code suggested above should enable that option:

        autoplay       : true,
        autoplaySpeed  : 2000,

it does continuaslly play, however it stops then starts then stops then starts.

Is there a way to make it move constantly so no stopping at all?..

thank you for all your help

i have used the slider to show services, which looks great,

however i also need to use the posts for blog articles, when these are created i don’t want them to appear on the slider.
these are the tick box options on the post page, however they are all unticked, but the post is still appearing in the slider? any ideas please?

Post Carousel Display
Display this post in the Post Carousel if you have “Featured” selected in the Customizer.

Post Slider Display – Blog
Display this post in the Blog Post Slider if you have “Featured” selected in the Customizer.

Post Slider Display – Archives
Display this post in the Archives Post Slider if you have “Featured” selected in the Customizer.