In this article, I am going to describe about how to show parts of both sides of slick slider.
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 a normal slick slider
To make it easy, we will make normal slick slider first and make changes.
<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;
}
.slider .slick-arrow{
z-index:2!important;
}
.slider .slick-next{
right:0!important;
}
.slider .slick-prev{
left:0!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>
<script>
$('.slider').slick({
autoplay: true, //autoplay
dots: true, //dots
infinite: true, //loop
pauseOnHover: false, //don't stop when hoverd
})
</script>Now we can see a normal slick slider.
②CenterModeを指定する
We can show the slides of both side by setting centerMode option true.
And we can decide how much to show by centerPadding option.
$('.slider').slick({
autoplay: true,
dots: true,
infinite: true,
pauseOnHover: false,
centerMode:true, //added
centerPadding:"20%", //added
})The slides of both side has been shown.
③Create a gap between slides
Now there are no gap between slides and sticking together, so let’s create a gap.
.slider .slick-slide{
margin-right: 1vw!important;
margin-left: 1vw!important;
}The gap between slides have been created!
If you want to know other 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.
<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;
}
.slider .slick-arrow{
z-index:2!important;
}
.slider .slick-next{
right:0!important;
}
.slider .slick-prev{
left:0!important;
}
.slick-slide{
margin-right: 1vw!important;
margin-left: 1vw!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>
<script>
$('.slider').slick({
autoplay: true, //autoplay
dots: true, //dots
infinite: true, //loop
pauseOnHover: false, //don't stop when hoverd
centerMode:true, //show the slides of both side
centerPadding:"20%", //how much to show the slides of both side
})
</script>That is all, it was about how to show parts of both sides of slick slider.
Comments