Tuesday, October 04, 2022
The Great Tit
Updated: 4. 10. 2022, Added: 4. 10. 2022

How to use multiple Swiper.js sliders with same settings on one page

If you need to use one slider with same settings on one page multiple times, you don't need to create a JavaScript for each slider. For example, I use multiple video sliders. Their content takes from the ACF repeater:

Multiple same swiper.js sliders with other content from ACF repeaters

You can use one code to initiate all sliders. You don't need to add special classes to your navigation and slider name. You can use the same classes.

Here is the code for multiple same setting Swiper sliders initialization. I use it in Oxygen Builder Code block, but you can use it for whatever implementation of Swiper.js:

// declare Swiper.js .classes
const myCustomSlider = document.querySelectorAll('.slider-video');

// declare navigation arrows classes
const mySliderPrev = document.querySelectorAll('.slider-prev');
const mySliderNext = document.querySelectorAll('.slider-next');


for( i=0; i< myCustomSlider.length; i++ ) {
// add special class with number to each Swiper.js slider and its nabigation arrows  
  myCustomSlider[i].classList.add('slider-video-' + i);
  mySliderPrev[i].classList.add('slider-prev-' + i);
  mySliderNext[i].classList.add('slider-next-' + i);

// Initiate the Sliders
  var vidswiper = new Swiper('.slider-video-' + i, {
   // Set sliders parameters
                        slidesPerView: 1,
                        slidesPerGroup: 1,
                        spaceBetween: 20,
                        grabCursor: true,
                        watchOverflow: true,
                        // Navigation arrows
                        navigation: {
                            nextEl: '.slider-next-' +i,
                            prevEl: '.slider-prev-' +i,
                        },
                        // Responsive breakpoints
                        breakpoints: {
                            480: {
                                slidesPerView: 1.2,
                                spaceBetween: 20
                            },
                            768: {
                                slidesPerView: 1.2,
                                spaceBetween: 25
                            },
                            992: {
                                slidesPerView: 1.2,
                                spaceBetween: 40
                            },
                            1280: {
                                slidesPerView: 1.2,
                                spaceBetween: 40
                            }
                        }
  });

}
Did I help you? Support me on Patreon!
Beep this article to your friends!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram