(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 Card Slider Carousel with Elementor and SwiperJS
In this tutorial, we will create card carousel that can stacks automatically and allows to drag.
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
Card Slider Code
- .dm-card-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.
- Following are the Card Effects that we can customize:
– perSlideOffset – it controls how much offset there should be for each card behind our active card.
– perSlideRotate – Rotation for each card behind our active card.
<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-card-swiper', {
// Optional parameters
direction: 'horizontal',
loop: false,
grabCursor: true,
effect: "cards",
mousewheel:false,
cardsEffect : {
perSlideOffset:8,
perSlideRotate:2,
rotate:true,
slideShadows:true,
},
// Wrapper and slide class
wrapperClass: 'dm-card-swiper-wrapper',
slideClass: 'dm-card-swiper-slide',
navigation: {
nextEl: ".dm-card-swiper-next",
prevEl: ".dm-card-swiper-prev",
},
pagination: {
el: ".dm-card-swiper-pagination",
type: "fraction",
},
breakpoints: {
1024: {
spaceBetween: 0,
},
767: {
spaceBetween: 0,
},
0: {
spaceBetween: 0,
},
},
});
});
</script>
<style>
.dm-card-swiper-wrapper .e-con.e-flex{
flex-shrink: 0 !important;
}
.dm-card-swiper-pagination {
max-width:10% !important;
}
.dm-card-swiper,
.dm-card-swiper-wrapper
{
transform-style: preserve-3d;
}
.dm-card-swiper-slide {
}
.dm-card-swiper-next,
.dm-card-swiper-prev {
cursor: pointer;
}
</style>
