How to get classic slider to "slide" left to right instead of right to left

Is there a simple way to get the automatic slideshow function on the classic slider element to go in the opposite direction from the default? I have a page with multiple sliders and the client wants some to animate/navigate from left to right instead of right to left.

I’ve searched the forums and don’t see that anyone has asked this previously. Before digging in and backward engineering the slider I thought I should ask in case there was a little code snippet that already existed which I could just copy & paste.

Hello @jasonixr,

Thanks for writing in!

By default, the slider will autoplay from left to right. If you want to change this setting, you will need to customized the slider code. And 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 the child theme is set up, please add the following code in your child theme’s functions.php file

// RTL support for Classic Slider
// =============================================================================

function rtl_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' => '',
  ), $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',
    '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' ),
    'rtl' => 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', 'change_x_shortcode_slider');

function change_x_shortcode_slider() {
  remove_shortcode( 'x_slider' );
  add_shortcode( 'x_slider', 'rtl_x_shortcode_slider' );
}
// =============================================================================

We would love to know if this has worked for you. Thank you.

Thanks for this!

I added to the child theme’s functions.php but unfortunately the autoplay still slides in the same direction as before.

However, before you troubleshoot any further I want to make it clear that I’m trying to figure out a way to have some of the sliders autoplay left to right and others right to left on the same page. Unless I’m mistaken the code I’ve added to functions.php would change the direction for all sliders anywhere on the website (if it was working).

I’m guessing there isn’t an easy way to do what I’m trying to accomplish but thought it worth asking just in case.

Hello @jasonixr,

I have logged in and investigated the issue. I even made changes to the code adding this:

    'reverse' => true,
	'rtl'	  => true

Still, the slides goes from right to left. There must be a conflict or bug in the JS code. I will report this to our developers for further investigation. For the meantime, the slide’s direction will be the default.

Thank you for your understanding.

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