Prevent Classic Slider from Looping

[Nuera]

Hi there,

Hoping I’ve got what should be a fairly straight-forward tweak here. We’ve got a site we’re working on that features a Classic Slider element. It works perfectly except for one detail: We’d like it to just hold on the final slide and not loop.

You can see it in the hero section of this page:
https://bmor.nueramarketing.com/

I dug through Stack Overflow and similar sites and it looks like it should be possible, but I don’t know enough about this particular X/Pro element to know where to begin.

Thanks and please let me know if you have any questions!
~Grant

[ruenel]

Hello @Nuera,

Thanks for writing in!

By default, the animation loop is enabled. To resolve your issue, the slider element needs to be modified. I went ahead and resolve your issue by adding this code in your child theme’s functions.php file:

// Custom Slider element
// =============================================================================

function custom_x_shortcode_slider( $atts, $content = null ) {
  extract( shortcode_atts( array(
    'id'             => '',
    'class'          => '',
    'style'          => '',
    'animation'      => '',
    'slide_time'     => '',
    'slide_speed'    => '',
    'slideshow'      => '',
    'random'         => '',
    'control_nav'    => '',
    'prev_next_nav'  => '',
    'no_container'   => '',
    'touch'          => '',
    'pause_on_hover' => '',
    'animationLoop'       => true,
  ), $atts, 'x_slider' ) );

  static $count = 0; $count++;

  $id            = ( $id            != ''     ) ? 'id="' . esc_attr( $id ) . '"' : '';
  $class         = ( $class         != ''     ) ? "x-flexslider-shortcode-container " . esc_attr( $class ) : "x-flexslider-shortcode-container";
  $style         = ( $style         != ''     ) ? 'style="' . $style . '"' : '';
  $no_container  = ( $no_container  == 'true' ) ? '' : ' with-container';

  $js_params = array(
    'animation'    => ( $animation      == 'fade'  ) ? 'fade' : 'slide',
    'animationLoop'  => false,
    'slideTime'    => ( $slide_time     != ''      ) ? $slide_time : '7000',
    'slideSpeed'   => ( $slide_speed    != ''      ) ? $slide_speed : '600',
    'controlNav'   => ( $control_nav    == 'true'  ),
    'prevNextNav'  => ( $prev_next_nav  == 'true'  ),
    'slideshow'    => ( $slideshow      == 'true'  ),
    'random'       => ( $random         == 'true'  ),
    'touch'        => ( $touch          != 'false' ),
    'pauseOnHover' => ( $pause_on_hover == 'true' )
  );

  $data = cs_generate_data_attributes( 'slider', $js_params );

  $output = "<div class=\"{$class}{$no_container}\">"
            . "<div {$id} class=\"x-flexslider x-flexslider-shortcode x-flexslider-shortcode-{$count}\" {$data} {$style}>"
              . '<ul class="x-slides">'
                . do_shortcode( $content )
              . '</ul>'
            . '</div>'
          . '</div>';

  return $output;
}

add_action('wp_head', 'update_slider_element');
function update_slider_element() {
  remove_shortcode( 'x_slider' );
  remove_shortcode( 'slider' );	
  add_shortcode( 'x_slider', 'custom_x_shortcode_slider' );
  add_shortcode( 'slider', 'custom_x_shortcode_slider' );	
}
// ====================================================

For reference, you can check out this thread:

• https://theme.co/apex/forum/t/slider-loop-false/9099/3

Please check your slider now.

[Nuera]

Sorry, that does not seem to have any effect. Is there another step we can try? If not, I need to abandon this element and replace it with another solution fairly quickly.

The thread you supplied seems to echo the same. Has there been no progress on this topic in the last two years?

[ruenel]

Hello Grant,

The animation loop seems to have been ignored.
This could be a bug in the FlexSlider code. We use this one by the way:

• https://github.com/woocommerce/FlexSlider/wiki/FlexSlider-Properties

I’ve submitted this to our issue tracker so the developers will be made aware of it.