[Ryan BParticipant]

Is it possible to have the post carousel on the top of this site http://mzing.co/westmontplaza/ auto rotate, or auto slide to the next group of 4 or 5?

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.

[ZeshanMember]

Hi Ryan,

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.

[isearchlocalParticipant]

hi, i got directed to this thread on the back of my own question regarding setting the slider to auto play.
The code above worked great! however i wanted to know if its possible to make the slide a bit smoother, it seems to jolt.

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

[ZeshanMember]

Hi there,

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!

[isearchlocalParticipant]

thank you! will play about with those speeds
is there a way to make it continuous?

[JadeModerator]

Hi there,

Do you mean continuously rotating the slider?

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

        autoplay       : true,
        autoplaySpeed  : 2000,

[isearchlocalParticipant]

hi,

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

[isearchlocalParticipant]

also one other request for the carousel slider.

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.

[isearchlocalParticipant]

sorry i have figured it out! thank you

[DarshanaModerator]

Glad you were able to figure it out 🙂

[isearchlocalParticipant]

ha, thanks. i figured out the carousel v blog slider issue.
however not the continuous motion on carousel.

I do have another one though, by the way i do need to say what fantastic support you guys offer! it is easily the best out there.

on the posts… it does not allow me to have a rev slider above masthead. is there a way of doing this?

Thanks

[Rue NelModerator]

Hello There,

To control the continuous motion of the slider or carousel, you need to adjust these settings in the code:

  speed          : 500,
   autoplay       : true,
   autoplaySpeed  : 2000,

Regretfully the slider settings above and below the masthead is only available in pages. There is no option to add a slider on posts. Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding.

[Author]

Posts