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
});③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