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

min read / Custom Code, WordPress / Share on: Twitter, LinkedIn, Facebook

Post summary: 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: You can use one code to initiate all sliders. You don’t need to add special classes…

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:

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
                            }
                        }
  });

}

1 comments