In this article, I am going to describe about how to create flip slider using effect option of swiper.js.
I’ｍ 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
Table of Contents
①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', {
loop: true, // loop
autoplay: { // auto play
delay: 2000,
},
pagination: { // pagination(dots)
el: '.swiper-pagination',
},
navigation: { // navigation(arrows)
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})
</script>Now we can see normal slider.
②Apply the flip effect
Set effect option ‘flip’ as below.
To make the motion clear, specify slede speed as well.
const swiper = new Swiper('.sample-slider', {
loop: true,
speed: 2000, // added(slide speed)
effect: 'flip', // added(apply flip effect)
autoplay: {
delay: 2000,
},
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})Flip slider has been completed!
③Remove the shadow on the slide surface
When using the flip effect, shadows are applied to the slide surface by default. If you want to remove this shadow, you can specify slideShadows: false, within the flipEffect configuration.
const swiper = new Swiper('.sample-slider', {
loop: true,
speed: 2000,
effect: 'flip',
flipEffect: { // added
slideShadows: false, // added (Remove the shadow on the slide surface)
}, // added
autoplay: {
delay: 2000,
},
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})
The shadow on the slide surface has been removed.
The full text of source code
In the end, I put the full text of source code.
<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', {
loop: true, // loop
speed: 2000, // slide speed
effect: 'flip', // apply flip effect
flipEffect: {
slideShadows: false, // Remove the shadow on the slide surface
},
autoplay: { // auto play
delay: 2000,
},
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 flip slider with swiper.js.
There are the other sliders which can be made by effect option.
[Swiper]How to create cube slider
[Swiper]How to create card slider
[Swiper]How to create coverflow slider
[Swiper]How to create fade slider
[Swiper]How to create original slider using creativeEffect
If you are interested in how various slider can be made by swiper.js, please refer below article!
Swiper Demo 19 Slider
