[Slick]How to create infinite loop slider

infinite loop sliderFrontend



In this article, I am going to describe about how to create infinite loop slider which automatically move sideways by using slick.js.


I’m going to proceed on the premise that you know how to make normal slider with slick.js.
So if you are new to slick.js, firstly check the below article.
How to make Caroucel Slider with Slick.js【only 4 steps】






①Create normal slider which doesn’t have arrows or dots.

Because we are going to create a slider which continue to flow, so we don’t put arrows or dots.
Let’s add only autoplay option.

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<style>
    .slider{
        width:70%;
        margin:0 auto;
    }
    .slider img{
        width:100%;
    }
    .slider .slick-slide{
        height:auto!important;
    }
</style>

<div class="slider">   
    <div><img src="./img/slider_image1.png"></div>
    <div><img src="./img/slider_image2.png"></div>   
    <div><img src="./img/slider_image3.png"></div>
    <div><img src="./img/slider_image4.png"></div>
</div>

<script>
    $('.slider').slick({
        autoplay: true,         //autoplay
        autoplaySpeed: 0,       //autoplay speed
    })
</script>

Now we can see the autoplay slider which doesn’t have arrows or dots.





②Set slide speed and number of slide displayed.

We can use speed option slidesToShow option to set slide speed and number of slide displayed.

$('.slider').slick({
    autoplay: true,
    autoplaySpeed: 0,
    speed: 2500,            //added(slide speed
    slidesToShow: 3,        //added (number of slide displayed
});





connaiconnai

③Make slide motion constant velocity

By setting “liner” at cssEase option, make slide motion constant velocity.

$('.slider').slick({
    autoplay: true,
    autoplaySpeed: 0,
    speed: 2500,
    slidesToShow: 3,       
    cssEase: "linear",      //added(make slide motion constant velocity
});






④Do not stop when hovered or focused

Add options like below to not stop slider when hovered or focused

$('.slider').slick({
    autoplay: true,
    autoplaySpeed: 0,
    speed: 2500,
    slidesToShow: 3,       
    cssEase: "linear",
    pauseOnHover: false,    //added(do not stop when hovered
    pauseOnFocus: false,    //added(Do not stop when focused
});

Now the infinite loop slider is completed!





If you want to know other variety of slick slider, below article might be helpful.
Slick Demo 7 slider







The full text of sourece code

In the end, I put the full text of source code.

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<style>
    .slider{
        width:70%;
        margin:0 auto;
    }
    .slider img{
        width:100%;
    }
    .slider .slick-slide{
        height:auto!important;
    }
</style>


<div class="slider">   
    <div><img src="./img/slider_image1.png"></div>
    <div><img src="./img/slider_image2.png"></div>   
    <div><img src="./img/slider_image3.png"></div>
    <div><img src="./img/slider_image4.png"></div>
</div>


<script>
    $('.slider').slick({
        autoplay: true,         //autoplay
        autoplaySpeed: 0,       //autoplay speed
        speed: 2500,            //slide speed
        slidesToShow: 3,        //number of slide displayed
        cssEase: "linear",      //make slide motion constant velocity
        pauseOnHover: false,    //added(do not stop when hovered
        pauseOnFocus: false,    //added(Do not stop when focused
    });
</script>







That is all, it was about how to create infinite loop slider which automatically move sideways by using slick.js.

Comments

Copied title and URL