Slider loop : false

Hi,

Is it possible to set the loop of Slider component of cornerstone to false so that when using arrow navigation, it does not loop back to the first image?

I have a series of images that needs to be ordered chronologically and would not like it to loop back to the old data once I have loaded the most recent image.

Also, it there a better way/control to handle such presentation. e.g. time slider so that when you drag the slider, the image changes accordingly.

You can view the implementation and my problem here:

https://rei.dwer.wa.gov.au/estuary/wilson-inlet/estuary/water-quality/physical-profiles/

Thanks in advance,

Hello There,

Thanks for writing in! By default the Slider loop is set to infinite. If you want to set it to false, we need to modify the slider and override the loop. Because what you are trying to accomplish requires a template customization, we would highly to suggest that you use 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.

After the child theme is set up, please add the following 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' => '',
    'infinite'       => 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',
    'infinite'     => 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' );
  add_shortcode( 'x_slider', 'custom_x_shortcode_slider' );
}
// =============================================================================

Please be very careful in copying and pasting of the codes above. Invalid quotes or other character may return a fatal error or a white blank screen.

We would loved to know if this has work for you. Thank you.

Hi @RueNel,

Thanks for responding. I added the code to functions.php and also cleared cache - The looping is still infinite.

Any other pointers?

Hello Again,

Sorry if it did not work for you. There was an error in the code. Please have it updated and make use of this code instead:

// 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' );
  add_shortcode( 'x_slider', 'custom_x_shortcode_slider' );
}
// =============================================================================

We would loved to know if this has work for you. Thank you.

Hi,

That didn’t work as well.

Hello There,

Thanks for updating in! I have tested the code over and over with a lot of different modification and I can confirm that you cannot stop the infinite looping of the slides. I think this is a bug with the slider. There should be an option to stop the looping or not. I will be forwarding this to our developers so that they can investigate further.

Thank you for your understanding.

Hi @RueNel,

Thanks for responding to this and forwarding it to the developers. Hopefully there will be a fix soon. Appreciate your help in this matter.

You’re most welcome @dshakya
If you need anything else we can help you with, don’t hesitate to open another thread.