search

Home  >  Q&A  >  body text

How to make a slick slider autoplay continuously but accelerate scrolling on arrow/point click?

I want to make a slider that plays automatically continuously. It works fine, but the arrows and points don't seem to be working properly. I'm not sure what settings I should change, but I want the slider to scroll immediately after clicking the arrow or dot.

I tried changing some settings using the code below but nothing seems to work.

When speed is set to 6000 the autoplay has perfect timing but uses the same slow speed when scrolling after clicking the dot/arrow, this behavior is undesirable (It should immediately scroll to the selected slide). Can you help me understand what I should do to achieve my goals?

$(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="https://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>

P粉956441054P粉956441054249 days ago480

reply all(1)I'll reply

  • P粉217784586

    P粉2177845862024-03-26 20:36:40

    Some JS options may not work with other settings (just like in SwiperJS), so as you go through each added JS function, pay attention to whether it may negate another earlier setting. The following should get you on the right track (as an example).

    sssccc

    reply
    0
  • Cancelreply