(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 Thumbnail Slider Carousel with Elementor and SwiperJS
In this tutorial, we will use the thumbs effect of swiperjs. It basically allows us to connect 2 sliders. This way we can make it look anyway and it will be synced.
Layout for containers or DIV (Same layout is repeated twice, you can place thumbnailSwiper container anywhere):
Support by
using these links
(Affiliate)
Start Earning by becoming an Elementor Affiliate
Thumb Slider Code
- .dm-thumb-swiper is the CSS class for the main container that has all the slides, navigation, and pagination.
- .dm-thumb2-swiper is the CSS class for the 2nd swiper, it can be designed to look like thumbnails.
- 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.
- freemode allows dragging to make the slider glide. (Only enabled for thumbs in code below but it can be added to any swiper)
- 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.
- You can refer to other sliders on my blog or youtube videos and easily connect 2 of them by using thumbs property of swiperjs at line 64.
<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) => {
//Thumbnails Slider
const ThumbSwiper2 = new Swiper('.dm-thumb2-swiper', {
// Optional parameters
direction: 'horizontal',
loop: false,
grabCursor: true,
mousewheel:false,
freeMode: true,
// Wrapper and slide class
wrapperClass: 'dm-thumb2-swiper-wrapper',
slideClass: 'dm-thumb2-swiper-slide',
breakpoints: {
1024: {
slidesPerView:4,
spaceBetween: 10,
},
767: {
slidesPerView:4,
spaceBetween: 10,
},
0: {
slidesPerView:4,
spaceBetween: 10,
},
},
});
//Main Slider
const ThumbSwiper = new Swiper('.dm-thumb-swiper', {
// Optional parameters
direction: 'horizontal',
loop: true,
grabCursor: true,
mousewheel:false,
freeMode: false,
// Wrapper and slide class
wrapperClass: 'dm-thumb-swiper-wrapper',
slideClass: 'dm-thumb-swiper-slide',
thumbs: {
swiper: ThumbSwiper2,
},
navigation: {
nextEl: ".dm-thumb-swiper-next",
prevEl: ".dm-thumb-swiper-prev",
},
pagination: {
el: ".dm-thumb-swiper-pagination",
type: "fraction",
},
breakpoints: {
1024: {
spaceBetween: 0,
},
767: {
spaceBetween: 0,
},
0: {
spaceBetween: 0,
},
},
});
});
</script>
<style>
/*Main Slider*/
.dm-thumb-swiper-wrapper .e-con.e-flex{
flex-shrink: 0 !important;
}
.dm-thumb-swiper-pagination {
max-width:10% !important;
}
.dm-thumb-swiper,
.dm-thumb-swiper-wrapper
{
}
.dm-thumb-swiper-slide {
}
/*Thumbnail Slider*/
.dm-thumb2-swiper-wrapper .e-con.e-flex{
flex-shrink: 0 !important;
}
.dm-thumb2-swiper-pagination {
max-width:10% !important;
}
.dm-thumb2-swiper,
.dm-thumb2-swiper-wrapper
{
}
.dm-thumb2-swiper-slide {
opacity:0.5;
border-radius:10px;
}
.dm-thumb2-swiper-slide.swiper-slide-thumb-active {
opacity: 1;
}
</style>
