Multiple SwiperJS on same site

addUniqueClassName.js

// Add file in code embed just after the sliders, or before </body>

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

initiateSwiperJS.js

// Load SwiperJS bundle with: <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

// swiper JS Initialize

var slider = document
  .getElementById("projects")
  .querySelectorAll("div.swiper-container");

slider.forEach(function (ele, i) {
  var mySwiper = new Swiper(`.swiper-${i}`, {
    // Optional parameters
    spaceBetween: 0,

    pagination: {
      el: `.pagination-${i}`,
      type: "fraction",
    },

    navigation: {
      nextEl: `.slider-next-${i}`,
      prevEl: `.slider-prev-${i}`,
    },

    loop: true,
    //pagination: {
    //  el: '.swiper-pagination',
    //},
    breakpoints: {
      0: {
        /* when window >=0px - webflow mobile landscape/portriat */
        slidesPerView: "auto",
        spaceBetween: 0,
      },
      767: {
        /* when window >= 767px - webflow tablet */ slidesPerView: "auto",
        spaceBetween: 0,
      },
      988: {
        /* when window >= 988px - webflow desktop */ slidesPerView: "auto",
        spaceBetween: 0,
      },
    },
  });
});

sliderStyle.css

.slider-next,
.slider-prev {
  outline: none;
}


.swiper-pagination-fraction {
  width: auto !important;
  bottom: 0px !important;
  left: auto !important;
}

.swiper-pagination {
  text-align: right !important;
}

.swiper-slide {
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}

/* load external styles: <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> */

SwiperStructure.md

Div names and structure

| 
|—— div.slider-prev 
|—— div.slider-next 
|—— div.swiper-container 
|   |—— div.swiper-wrapper 
|       |—— div.swiper-slide 
|—— div.swiper-pagination-small