Multiple SwiperJS sliders, Metalworks

[Birk_Marcus_Hansen]

Hi. Just want to share this project. It tuck some time and custom code to get the multiple SwiperJS slider to work independently.

metalworks - Webflow

Here’s the custom code that made it possible:

In page settings:

var slider = document.getElementById("projects").querySelectorAll("div.swiper-container");
  slider.forEach(function(ele, i){
		  var mySwiper = new Swiper (`.swiper-${i}`, {
    spaceBetween: 0,
    
    pagination: {
    	el: `.pagination-${I}`,
      type: "fraction"
    },
   
    navigation: {
      nextEl: `.slider-next-${i}`  ,
      prevEl: `.slider-prev-${i}` ,
    },

...

HTML Embed in footer:

// Add classes to swiper containers
  var x = document.getElementById("projects").querySelectorAll("div.swiper-container");
  x.forEach(function(ele, i){
		  ele.className += ` swiper-${i}`; 
  });
  
  // Add classes to next button
  var y = document.getElementById("projects").querySelectorAll("div.slider-next");
  y.forEach(function(ele, i){
	 	 	ele.className += ` slider-next-${i}`; 
  });
  
  var z = document.getElementById("projects").querySelectorAll("div.slider-prev");
  z.forEach(function(ele, i){
	 	 	ele.className += ` slider-prev-${i}`; 
  });
  
  // Add class to each pagination
  var x = document.getElementById("projects").querySelectorAll("div.swiper-pagination-small");
  x.forEach(function(ele, i){
		  ele.className += ` pagination-${i}`; 
  });