(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 Slider Carousel with Elementor and SwiperJSÂ
In this tutorial, we will learn to create base slider in Elementor using swiperjs. We will be making layout with containers to match swiperjs required layout and also overwrite and add some styling that elementor has conflicts with.
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
Add Your Heading Text Here
Add Your Heading Text Here
Base Slider Code
- dm-base-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.
- mousewheel can be set to true/false to allow switching slides with mouse scroll wheel.
- 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 more and get code below in this page.
- For bullet pagination, we can give bullets a custom CSS class. This is important as swiperjs CSS is not getting added automatically, probably because of elementor conflicts.
- So we provide custom CSS for bullets at bulletClass and bulletActiveClass. This is very much needed, as I have provided CSS styling to customize the bullet points as swiperJS CSS is not getting added automatically.
- breakpoints allows to use different parameters for different screen sizes. In the below code, at breakpoints, any parameter added in 0: is added to mobile, 767: is added to tablet and 1024: is added to desktop. The values used 0, 767, 1024 are min-width values. So any device over 1024px will have the 1024 parameters. The breakpoints numbers that I have used are same as Elementor breakpoints.
- If you plan to use below parameters, you can add them only once after line 15 and it will apply to all devices. But if you plan to have different values for different devices, DO NOT add it after line 15 and only add them in the breakpoints.
- Important parameters that can be added around line 15 below
- slidesPerView: 3, – Decide how many slides to show at once
- slidesPerGroup:1, – How many slides to move on navigation click.
- slidesPerView: “auto”, – Fits the number of slides automatically to whatever width your slides are. Also good for dynamic number of slides to show based on width of your main swiper container. Example: if 5 slides can fit, it will fit 5 slides. If in smaller screens, only 2 can fit, then it will fit only 2.
- spaceBetween: 20, – Distance between each slides (Make sure you have set gap to be 0 in swiper-wrapper container)
- centeredSlides: true, – The active slide is in center instead of left first. Also check initialSlide if you first slide is not being in center. By default initialSlide is 0, but if it is not showing your first slide in center and using last slide instead, just make initialSlide: 1. So that it shows next slide center and first.
- freeMode: true, – Removes snapping when dragging and allows the slides to glide. Speed of glide is dependent on how fast you dragged.
Note: To understand the inner animations CSS code, please watch the video. This allows you to have custom animations for slide contents. Basically, we use the swiper-slide-active CSS class to trigger our animation.
<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-base-swiper', {
// Optional parameters
direction: 'horizontal',
loop: true,
grabCursor: true,
mousewheel:false,
centeredSlides:false,
initialSlide:0,
// Wrapper and slide class
wrapperClass: 'dm-base-swiper-wrapper',
slideClass: 'dm-base-swiper-slide',
navigation: {
nextEl: ".dm-base-swiper-next",
prevEl: ".dm-base-swiper-prev",
},
pagination: {
el: ".dm-base-swiper-pagination",
// type: "fraction",
// type: "progressbar",
bulletClass: "dm-base-bullet",
bulletActiveClass: "dm-base-bullet-active",
clickable: true,
},
breakpoints: {
1024: {
spaceBetween: 20,
slidesPerView:1,
slidesPerGroup:1,
},
767: {
spaceBetween: 20,
slidesPerView:1,
slidesPerGroup:1,
},
0: {
spaceBetween: 20,
slidesPerView:1,
slidesPerGroup:1,
},
},
});
});
</script>
<style>
.dm-base-swiper-wrapper .e-con.e-flex{
flex-shrink: 0 !important;
}
/*Show cursor pointer on arrows*/
.dm-base-swiper-next,
.dm-base-swiper-prev {
cursor:pointer;
}
/*Inner Content Animation Boiler Plate*/
.dm-base-swiper-slide.swiper-slide-active .dm-base-slide-text {
animation: dmBaseSliderAnim 1s ease-in-out forwards;
}
.dm-base-swiper-slide.swiper-slide-active .dm-base-slide-text-2 {
animation-delay: 0.3s !important;
animation: dmBaseSliderAnim 1s ease-in-out forwards;
opacity: 0;
}
@keyframes dmBaseSliderAnim {
0% {
opacity: 0;
transform:translateY(100px);
}
100% {
opacity: 1;
transform:translateY(0px);
}
}
/*Pagination Container Size*/
/*Remove for progressbar type*/
.dm-base-swiper-pagination {
width:fit-content !important
}
/*For mobile*/
@media(max-width:767px) {
.dm-base-swiper-pagination {
width:fit-content !important;
}
}
/*For Bullet Pagination*/
.dm-base-bullet {
position:relative;
width:8px;
height: 8px;
aspect-ratio: 1;
background:black;
border-radius:100px;
cursor:pointer;
opacity: 0.2;
}
.dm-base-bullet.dm-base-bullet-active {
opacity: 1;
}
</style>
Pagination Style – Fraction
- To use fraction as pagination, simply remove the “//” in the code above. It should look like below code.Â
- You can customize the fonts using basic CSS for the fraction. Below is a basic styling boiler plate.
- It is also possible to use different styling for current number and total number. For that please look the CSS classes via inspect tool of your browser.
pagination: {
el: ".dm-base-swiper-pagination",
type: "fraction",
// type: "progressbar",
bulletClass: "dm-base-bullet",
bulletActiveClass: "dm-base-bullet-active",
clickable: true,
},
<style>
/* Font styling for pagination fraction */
.dm-base-swiper-pagination {
color: red; /* text color */
font-family: 'Inter', sans-serif; /* typeface */
font-weight: 600; /* font thickness */
font-size: 16px; /* text size */
line-height: 1.4; /* spacing between lines */
letter-spacing: 0; /* spacing between letters */
text-transform: none; /* uppercase / lowercase options */
}
</style>
Pagination Style – ProgressBar
- To use progressbar as pagination, simply remove the “//” in the base code above. It should look like below code.Â
- You can customize the colors using basic CSS provided below.
- Important: From the base code, make sure to remove width:fit-content of both desktop and mobile. You can also set it to 100% if needed. Both options work.
pagination: {
el: ".dm-base-swiper-pagination",
// type: "fraction",
type: "progressbar",
bulletClass: "dm-base-bullet",
bulletActiveClass: "dm-base-bullet-active",
clickable: true,
},
<style>
/*For progresbar styling*/
.dm-base-swiper-pagination {
background:yellow !important;
}
.dm-base-swiper-pagination .swiper-pagination-progressbar-fill {
background: red !important;
}
</style>
Adding Autoplay to Slider
- You can add the below code around line 15 in base code to add autoplay.
- delay is how much time each slide is shown for.
- Rest of the properties are self explanatory. Just make them true on whichever you want enabled.
autoplay: {
delay: 2500,
disableOnInteraction: false,
pauseOnMouseEnter: false,
stopOnLastSlide: false,
reverseDirection: false,
waitForTransition: true,
},
Adding More Effects based on Autoplay
- We can control other elements in our website with “on” property of swiperjs. Please watch video to understand this in detail.
- The first code is used to store our element in a variable so that we can control it later using javascript. This needs to be added before our swiper before line 10 in our base code.
- The second code needs to be added after Autoplay code.
- Variable time shows how much time is left before switching to next slide. (Example: it will go down from 2500ms to 0ms)
- Progress shows how much progress is remaining before switching to next slide. (Example: it will go down from 1 to 0)
const dmAutoPlayProgressBar = document.querySelector('.dm-autoplay-swiper-progressbar');
/*Add after Autoplay Code*/
on: {
autoplayTimeLeft(swiper, time, progress) {
dmAutoPlayProgressBar.style.width = `${(1 - progress) * 100}%`;
}
},
Extra: Control any slider with any element click
- We can control any slider with basic JavaScript.
- .dm-swiper-custom-prev is the CSS class of our element that should do previous slide effect.
- .dm-swiper-custom-next is the CSS class of our element that should do next slide effect.
- Add this at the end of our script before final }); . This way to scope our code and it applies effect to our swiper.
- If you have used custom name for your swiper. Example: const dmSwiper = …..
Then make sure to change swiper.slidePrev() to dmSwiper.slidePrev().
/*Custom Button to switch slides*/
const dmCustomPrevBtn = document.querySelector('.dm-swiper-custom-prev');
const dmCustomNextBtn = document.querySelector('.dm-swiper-custom-next');
dmCustomPrevBtn.addEventListener('click',()=> {
swiper.slidePrev();
});
dmCustomNextBtn.addEventListener('click', ()=> {
swiper.slideNext();
});
