(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)
Don’t want to make from scratch? Get the template instead 🙂
Introduction – Making a Custom Flip Slider Carousel with Elementor and SwiperJS
In this tutorial, we will use swiperjs flip effect to create a slider. A quick opacity/fade effect is also added as there was some conflict with elementor, so it flashes very quickly but not much noticable.
Layout for containers or DIV:
The main layout is having a swiper container, inside it should be swiper-wrapper and inside swiper-wrapper should be slides. The swiper navigation container is optional, you can directly add Arrow icons and swiper-pagination in swiper container directly.
Support by
using these links
(Affiliate)
Start Earning by becoming an Elementor Affiliate
While editing, Temporary make the opacity:0 to opacity:1 in Elementor Editor
3D Flip Slider Code
- .dm-flip-swiper is the CSS class for the main container that has all the slides, navigation, and pagination.
- direction allows you to choose between horizontal and vertical direction for your slider.
- loop can be set to true/false to enable or disable looping.
- To add more features, refer to the “Custom Carousel” blog post or its video to learn how to customize further. Link – https://dmmotionarts.com/custom-base-slider-with-autoplay-elementor-swiperjs-slider-tutorial/
- wrapperClass is used to use custom CSS class for our swiper-wrapper. This is important as we don’t want elementor swiper styling to be applied here.
- slideClass is used to use custom CSS class for our slides. Important for the same reason as above.
- nextEl and prevEl is the CSS class that we use for navigation buttons. It can be added to any icon, image or text.
- In pagination, el: allows us to specify which container/div is our pagination container.
- We have different pagination types available. You can read or watch video on “Custom Carousel Blog Post” page.
- When editing in elementor, make the line 102 – opacity to 1 so that you can edit the slider. Once done, make it back to 0. For some reason, in mobile the flip slider was not working in elementor so this opacity is needed. It kinda flashes when you move the slider quickly but not much noticable.
- On line 87, remove the /* and */ for custom perspective value. This defines how much 3D effect is shown.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css" integrity="sha512-pmAAV1X4Nh5jA9m+jcvwJXFQvCBi3T17aZ1KWkqXr7g/O2YMvO8rfaa5ETWDuBvRq6fbDjlw4jHL44jNTScaKg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js" integrity="sha512-Ysw1DcK1P+uYLqprEAzNQJP+J4hTx4t/3X2nbVwszao8wD+9afLjBQYjz7Uk4ADP+Er++mJoScI42ueGtQOzEA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
window.addEventListener("load", (event) => {
const swiper = new Swiper('.dm-flip-swiper', {
// Optional parameters
direction: 'horizontal',
loop: true,
grabCursor: true,
effect: "flip",
flipEffect : {
limitRotation:false
},
// Wrapper and slide class
wrapperClass: 'dm-flip-swiper-wrapper',
slideClass: 'dm-flip-swiper-slide',
//Slides to show
//Use 'auto' to automatically get size
navigation: {
nextEl: ".dm-flip-swiper-next",
prevEl: ".dm-flip-swiper-prev",
},
pagination: {
el: ".dm-flip-swiper-pagination",
type: "fraction",
},
breakpoints: {
1024: {
spaceBetween: 0,
},
767: {
spaceBetween: 0,
},
0: {
spaceBetween: 0,
},
},
});
});
</script>
<style>
.dm-flip-swiper-wrapper .e-con.e-flex{
flex-shrink: 0 !important;
}
.dm-flip-swiper-pagination {
max-width:10% !important;
}
.dm-flip-swiper,
.dm-flip-swiper-wrapper
{
transform-style: preserve-3d;
/*perspective:1200px !important;*/
}
.dm-flip-swiper-slide {
-webkit-backface-visibility: hidden ;
backface-visibility: hidden ;
will-change: transform ;
pointer-events: none;
transition: transform 0.3s, opacity 0s;
/*Make this 1 when editing*/
opacity: 0;
}
.dm-flip-swiper-slide.swiper-slide-active {
pointer-events: auto;
transition: transform 0.3s, opacity 0s;
opacity:1 !important;
}
</style>
