Now there are many libraries which can make a caroucel silder, slick.js is one of the best option because it is customizable, responsive and mobile friendly.
In this article, I will show you how to create caroucel slider with slick.js
Only 4 steps.
1. load required library from CDN
Although there is a way downloading files, here we use CDN because it’s useful.
we use 4 libraries, write as below.(jQuery is also included)
<!-------------------- slick CSS ---------------------------------------------------------------------------------------->
<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">
<!----------------------------------------------------------------------------------------------------------------------->
<!--------------------jQuery----------------------------------------------------------->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<!------------------------------------------------------------------------------------->
<!-------------------- slick JS ----------------------------------------------------------------------------------------->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<!-----------------------------------------------------------------------------------------------------------------------> 2.HTML：prepare required parts for slick slider
you can use anything for most parent class. (here I make it “slider”)
<div class="slider">
<div><img src="./img/slider_img01.jpg"></div>
<div><img src="./img/slider_img02.jpg"></div>
<div><img src="./img/slider_img03.jpg"></div>
</div>3 images are arranged vertically.
3.Javascript : create a slider
$('.slider').slick({
autoplay: true, //autoplay
autoplaySpeed: 2000, //autoplay speed
speed: 800, //slide speed
dots: true, //dots below slide
arrows: true, //arrows both sides of slide
infinite: true, //loop infinitely
});Now it became slider! All that is left is fixing the look with css.
4.CSS : fixing the look with css
/*------ slider width ------*/
.slider{
width:70%;
margin:0 auto;
}
/*------ slider image ------*/
.slider img{
width:100%;
}
/*-------- height ----------*/
.slider .slick-slide{
height:auto!important;
}
/*--------- arrows ---------*/
.slider .slick-next{
right:0!important;
}
.slider .slick-prev{
left:0!important;
}
.slider .slick-arrow{
width: initial!important;
height: initial!important;
z-index:2!important;
}
.slider .slick-arrow:before{
font-size: 30px!important;
}
Now it looks good!
When you want to change position or size of arrows, change value of property below.
To change position：right and left of .slick-next and .slick-prev
To change size：font-size of .slick-arrow:before
Extra：arrow customizing
Below code will customize position, size color of arrows.
.slider .slick-next{
right:20px!important;
}
.slider .slick-prev{
left:20px!important;
}
.slider .slick-arrow:before{
font-size: 60px!important;
color:red!important;
}
Slick slider is customizable.
If you want to know more about slick slider, below articles might be helpful.
[slick.js]How to customize arrows of slick slider
[slick.js]How to customize dots of slick slider
Also, if you want to know variety of slick slider, below article might be helpful.
Slick Demo 7 slider
The full text of source code
In the end, I put the full text of source code.
<div class="slider">
<div><img src="./img/slider_img01.jpg"></div>
<div><img src="./img/slider_img02.jpg"></div>
<div><img src="./img/slider_img03.jpg"></div>
</div>
<style>
/*------ slider width ------*/
.slider{
width:70%;
margin:0 auto;
}
/*------ slider image ------*/
.slider img{
width:100%;
}
/*-------- height ----------*/
.slider .slick-slide{
height:auto!important;
}
/*--------- arrows ---------*/
.slider .slick-next{
right:0!important;
}
.slider .slick-prev{
left:0!important;
}
.slider .slick-arrow{
width: initial!important;
height: initial!important;
z-index:2!important;
}
.slider .slick-arrow:before{
font-size: 30px!important;
}
</style>
<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>
<script>
$('.slider').slick({
autoplay: true, //autoplay
autoplaySpeed: 2000, //autoplay speed
speed: 800, //slide speed
dots: true, //dots below slide
arrows: true, //arrows both sides of slide
infinite: true, //loop infinitely
});
</script>
That’s all, it was about How to make Caroucel Slider with Slick.js
Comments