如何使流畅的 slider 连续自动播放，但加快箭头/点单击时的滚动速度？

Question

. Answers to this question are eligible for a +50 reputation bounty. Kida wants to to this question.

I would like to make a slider, which is continuously autoplay. It works fine, but the arrows and dots don't look to work properly. I'm not sure which of the settings should I change, but I would like the slider to instantly scroll after clicking on the arrow or dot.

I was trying to change some settings with the code below, but nothing seems to work fine.

When speed is set to 6000 autoplay has perfect timing, but the same slow speed is used on scrolling after clicking on the dot/arrow and this behavior is unwanted (it should scroll immediately to chosen slide). Could you please help me to understand what should I do to achieve my goal?

 $(document).ready(function(){ $('.test').slick({ slidesToShow: 3, slidesToScroll: 1, autoplay: true, autoplaySpeed: 1, speed: 6000, dots: true, cssEase: 'linear', waitForAnimate: false, pauseOnFocus: false, pauseOnHover: false }); });

 .slick-prev:before, .slick-next:before { color: black;important; }

 <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> <link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick-theme.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <div style='margin-left:20px;width:200px;color:black;important;'> <div class='test'> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> </div>

Answer 1

Some JS options may not work with another setting (as it does in SwiperJS) so as you go through each added JS function watch for it to potentially negate another earlier setting. The following should get you on track (as an example).

<section class="slider">
<div>
  <img src="https://via.placeholder.com/200x200.gif/?text=1">
</div>

<script type="text/javascript">
$('.slider').slick({
  dots: true,
  infinite: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 800,
  pauseOnFocus: false, 
  pauseOnHover: true
});
</script>

Answer 2

You can achieve this behavior changing the autoplaySpeed to 6000 and the speed to 500, your code will look like this:

$(document).ready(function(){
  $('.test').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 6000,
    speed: 500,
    dots: true,
    cssEase: 'linear',
    waitForAnimate: false,
    pauseOnFocus: false, 
    pauseOnHover: false
  });
});

Answer 3

You can modify the transition speed on arrow/dot click by updating the speed property in the slick function. Here is an example in jQuery:

 $('.your-slider').slick({ autoplay: true, autoplaySpeed: 6000, speed: 1000, dots: true, arrows: true, }); $('.slick-arrow').on('click', function() { $('.your-slider').slick('slickSetOption', 'speed', 1000, true); }); $('.slick-dots button').on('click', function() { $('.your-slider').slick('slickSetOption', 'speed', 1000, true); });

This code sets the autoplay speed to 6000ms, but when the arrow or dot is clicked, it changes the transition speed to 1000ms. You can adjust the speed value to your desired transition speed on arrow/dot click.