
In this article, I am going to describe about how to create card slider with swiper.js.
I think this is one of the function that slick.js does not have.
I’m going to pursue the matter on the premise that you know how to make normal slider with Swiper.js. So if you are new to Swiper.js, firstly check the below article.
[Swiper]How to create simple responsive slider with swiper.js
①Create a normal swiper slider
To make it clear, we will create normal swiper slider first and then make changes.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<style>
.sample-slider{
width:50%;
}
.sample-slider img{
width: 100%;
}
</style>
<div class="swiper sample-slider">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/sample1.png"></div>
<div class="swiper-slide"><img src="./img/sample2.png"></div>
<div class="swiper-slide"><img src="./img/sample3.png"></div>
<div class="swiper-slide"><img src="./img/sample4.png"></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script>
const swiper = new Swiper('.sample-slider', {
pagination: { //pagination(dots)
el: '.swiper-pagination',
},
navigation: { //navigation(arrows)
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})
</script>
Now we can see normal slider.
②Make the slider card
We can make the slider card by setting effect: “card”.
Intidentally, lets set grabCursor option as well.
const swiper = new Swiper('.sample-slider', {
effect: "cards", //added
grabCursor: true, //added
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})
The slider has become card!
③Decorate the looks by CSS
Round the corners of slides by adding css as below.
.sample-slider{
width:70%;
}
.sample-slider .swiper-slide{ /* added */
border-radius: 20px; /* added */
} /* added */
.sample-slider img{
width: 100%;
vertical-align: bottom; /* added */
}
The corners of slides have been rounded!
The full text of source cord
In the end,I put the full text of surce cord.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<style>
.sample-slider{
width:70%;
}
.sample-slider .swiper-slide{
border-radius: 20px;
}
.sample-slider img{
width: 100%;
vertical-align: bottom;
}
</style>
<div class="swiper sample-slider">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/sample1.png"></div>
<div class="swiper-slide"><img src="./img/sample2.png"></div>
<div class="swiper-slide"><img src="./img/sample3.png"></div>
<div class="swiper-slide"><img src="./img/sample4.png"></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script>
const swiper = new Swiper('.sample-slider', {
effect: "cards", //make slider card
grabCursor: true, //grab cursor
pagination: { //pagination(dots)
el: '.swiper-pagination',
},
navigation: { //navigation(arrows)
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})
</script>
That is all,it was about how to create card slider by swiper.js.
There are the other sliders which can be made by effect option.
[Swiper.js]How to create cube slider
[Swiper.js]How to create coverflow slider
[Swiper.js]How to create flip slider
If you are interested in how various slider can be made by swiper.js, please refer below article!
Swiper Demo 16 Slider