Thumbnail slider

Create custom thumbnails for your sliders and explore endless design possibilities.  

Thumbnail Slider Image
Thumbnail Slider Image
Thumbnail Slider Image
Thumbnail Slider Image
Thumbnail Slider Image
Clone

You are almost there! Clone this template by clicking the link above. Learn, play around, test, use your own content, and have fun.

Paste this before <body> in project settings

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script>
   
     var galleryThumbs  = new Swiper("#thumb-swiper", {
       spaceBetween: 12,
      slidesPerView:"auto",
       watchSlidesProgress: true,
       grabCursor:true,
       centeredSlides: false,
       allowTouchMove: false,
      a11y: false,
});
       var galleryTop  = new Swiper("#gallery-swiper", {
       spaceBetween: 12,
       navigation: {
         nextEl: "#thumb-arrow-next-slide",
         prevEl: "#thumb-arrow-prev-slide",
       },
   /* This piece of code connects main slider with thumbnail slider*/
       thumbs: {
         swiper: galleryThumbs,
       },
       a11y: false,
loop: true,
     });
   </script>