Autoplay timing function not working as expected

[jpaul1982]

short description of the bug / issue, provide more detail below.

I've got a section where there two Slick sliders, one on top of the other, going in different directions. They're both on autoplay with the same settings, but at times they seem to independently speed up/slow down. I've also noticed that at certain times there are not images displaying (even thought the settings are set to infinite). I would expect them to move at the exact same speed with continuous rows of images. Anyone know what the issue might be? Very grateful for any help figuring this out.

(https://jsfiddle.net/paulM82/dwkj1cho/1/)

use this jsfiddle to reproduce your bug: https://jsfiddle.net/paulM82/dwkj1cho/1/) we will likely close your issue without it.

====================================================================

Steps to reproduce the problem

1. copy the html, jquery, and css from the jsfiddle and put into code editor
2. ... go live and see what is happening

====================================================================

What is the expected behaviour?

I would expect them to move at the exact same speed with continuous rows of images without any lag or jerkiness. ...

====================================================================

What is observed behaviour?

. They're both on autoplay with the same settings, but at times they seem to independently speed up/slow down. I've also noticed that at certain times there are not images displaying (even thought the settings are set to infinite). It almost seems like they're trying to catch up with themselves (if that makes any sense?!?) ...

====================================================================

More Details

• Which browsers/versions does it happen on? happens on both Chrome and Safari
• Which jQuery/Slick version are you using?
• jquery 3.6.3 and Slick 1.8.0
• Did this work before?

[andrewcbi]

I think you are potentially fighting the browser throttling the animation and may be better off with something like the below (adjust timing as desired).

(function ($) {
  $(document).ready(function () {

    $('#top-slider').slick({
      pauseOnHover: false,
      dots: false,
      arrows: false,
      infinite: true,
      autoplay: true,
      cssEase: 'cubic-bezier(0.4, 0.5, 0.4, 1)',
      autoplaySpeed: 2000,
      slidesToShow: 4,
      adaptiveHeight: true,
      variableWidth: true,
      slidesToScroll: 1,
      centerMode: true,
      pauseOnFocus: false,
      useCSS: true,
      waitForAnimate: true
    });

    $('#bottom-slider').slick({
      pauseOnHover: false,
      dots: false,
      arrows: false,
      infinite: true,
      autoplay: true,
      cssEase: 'cubic-bezier(0.4, 0.5, 0.4, 1)',
      autoplaySpeed: 2000,
      slidesToShow: 4,
      adaptiveHeight: true,
      variableWidth: true,
      rtl: true,
      slidesToScroll: 1,
      centerMode: true,
      pauseOnFocus: false,
      useCSS: true,
      waitForAnimate: true
    });
  });
})(jQuery);