Home/ Questions/Q 4619
Answered
Anonymous
Asked: 2023-02-03T06:37:25+00:00

How to make a slick slider continuously autoplay, but speed up scroll on arrow/dot click?

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-carouseldeeenos564513.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-carouseldeeenos564513.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>

 

Share

1 Answer

  1. Best Answer

    To make a Slick slider continuously autoplay but speed up the scroll on arrow/dot click, you can set the autoplaySpeed property to the desired value for the continuous autoplay, and set the speed property to a higher value to speed up the scroll on arrow/dot click.

    Here’s an updated code example:

    $(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
  });
});
.slick-prev:before,
.slick-next:before 
{
    color: black!important;
}

    In this example, the autoplaySpeed property is set to 6000, which will control the speed of the continuous autoplay. The speed property is set to 500, which will determine the speed of the scroll when clicking the arrow or dot.

    • 0

Leave an answer

You must login to add an answer.

Need An Account,