Classic Slider continuous scroll / change easing function

Support
#1

Hi,

I’ve got a classic slider element that I want to use to continuously scroll through content (logos), but it seems to have a custom easing function pre-built in and I can’t seem to change it to make scrolling between slides linear.
I’ve already set the desired animation speed and 0 duration, it’s just the aesing function I’m having trouble with.

I’ve tried adding transition-timing-function: linear!important; to the slide and active classes but this doesn’t change it.

I’d like to avoid using third party plugins where possible so I’m keen to hear your suggestions.

Cheers,
David

#2

Hello David,

Thanks for writing in!

The classic slider element is using jQuery Easing “Swing”. You cannot change it by way of custom css. You will need to modify the code of the slider in order to change the easing to linear. You can refer to this thread if you want to modify the classic slider coding. 'easing' => 'linear' must be added to one of the attributes of the shortcode.

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Regards.

#3

Hi @ruenel, thanks for the response.

I modified that code snippet you suggested and added it into my child theme functions.php but it hasn’t changed anything. Please let me know if it is accurate and what I’ll need to do to get it functional. I’m sure there are lots of X users out there looking for a similar continuous scroll effect.

Maybe there’s a simpler way to change the easing method in jQuery in the JS editor?

Here’s the code I used:

// 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,
‘easing’ => ‘linear’,
), $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}>”
. ‘

    ’
    . do_shortcode( $content )
    . ‘
’
. ‘’
. ‘’;

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’ );
}
// =============================================================================

Cheers,
David

#4

Hey David,

We’re sorry that my colleague’s answer is entirely wrong. As you can see in the other thread, the custom code didn’t work as well.

There’s no way to change what was offered in our elements. They are provided as-is and any customization is beyond the scope of our theme support.

The only solution, since you don’t want to use 3rd-party plugins is to create your own slider element. If you wish to learn how, please check the links below.


In case you’ll change your mind about using a 3rd-party plugin and if you’re not aware that we have bundled slider plugins, please check the links below.


Please note that I do understand your reason that this case might be useful for other users as well so I’ll post this in our tracker as a feature request. This way, we can track the user interest for a particular function and if there’s no problem implementing it, our development team will likely add it.

Hope that helps and thank you for understanding.

#6

Hi @christian,

Thanks for the response. That’s unfortunate but all good, hopefully we’ll see this functionality implemented in the future.

The custom element feature looks super cool though, I didn’t know that was available so I’ll definitely have a look at that!

Cheers,
David

#7

You are most welcome David.

#8

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

#9

Hey @DavidL ,

I saw this thread in the issue tracker and wanted to chime in with some extra info. At this point we generally don’t make updates to the classic elements, but there is a better way to tap in and modify that easing without redefining the shortcode. The WordPress shortcode_atts function is filterable. You could try something like this:

add_filter( 'shortcode_atts_x_slider', function( $atts ) {
  $atts['easing'] =  'custom-easing';
  return $atts;
});