Multiple instances of same Swiper on page

[bookbird101]

Hi, I'm trying to get the same swiper on a page appearing twice. I'm not the best at coding, so even though I've tried a few solutions, they have yet to work. Here is my current code:

const myCustomSlider = document.querySelectorAll('.image-gallery-swiper');
const galleryInitTriggers = document.querySelectorAll(".image-gallery-trigger");

for( i=0; i< myCustomSlider.length; i++ ) {
  
  myCustomSlider[i].classList.add('image-gallery-swiper-' + i);

  var slider = new Swiper('.image-gallery-swiper-' + i, {
   /* Options */
    grabCursor: true,
    allowTouchMove: true,
   	centeredSlides: true,
    loop: true,
    navigation: {
      nextEl: ".image-gallery-swiper-button-next",
      prevEl: ".image-gallery-swiper-button-prev",
    },
    speed: 500,
    effect: 'fade',
    fadeEffect: {
      crossFade: true
    },
    on: {
      init: function (swiper) {
        const currentSlideContainer = document.getElementById("currentSlide");
        const totalSlidesContainer = document.getElementById("totalSlides");
        
        const currentSlideContainersMobile = document.querySelectorAll(".image-gallery-current-slide-mobile");
        const totalSlidesContainersMobile = document.querySelectorAll(".image-gallery-total-slides-mobile");
        
        const realSlides = [...document.querySelectorAll("#imageGallery .swiper-slide:not(.swiper-slide-duplicate)")];
        const numSlides = realSlides.length;
        
        totalSlidesContainer.innerHTML = (numSlides < 10 ? '0' : '') + numSlides;
        currentSlideContainer.innerHTML = "01";
       
        totalSlidesContainersMobile.forEach(function(totalSlidesContainer) {
        	totalSlidesContainer.innerHTML = (numSlides < 10 ? '0' : '') + numSlides;
        });
        
        currentSlideContainersMobile.forEach(function(currentSlideContainer, index) {
        	const slideIndex = swiper.slides[index].dataset.swiperSlideIndex;
          currentSlideContainer.innerHTML = (slideIndex < 9 ? '0' : '') + (Number(slideIndex) + 1);
        });
      },
      slideChange: function (swiper) {
        const currentSlideContainer =  document.getElementById("currentSlide");

        currentSlideContainer.innerHTML = (swiper.realIndex < 9 ? '0' : '') + (Number(swiper.realIndex) + 1);
      },
    },
  });
  
  galleryInitTriggers.forEach(function(trigger) {
  	trigger.addEventListener("click", function() {
    	imageGallerySwiper.slideToLoop(0, 0, false);
    });
   
  });
}

I did not implement the original swiper, it already existed in the code. I am just trying to amend it so that both instances of the slider on the page will work. At the moment, only the first slider works. Thanks in advance!

[Specussa]

document.querySelectorAll(".home_category__flex").forEach((n) => {
const slider = new Swiper(n.querySelector(".home_category__slider"), {
loop: false,
slidesPerView: 'auto',
touchRatio: 0.2,
spaceBetween: 20,
slideToClickedSlide: true,
allowTouchMove: true,
navigation: {
nextEl: n.querySelector(".home_category__next"),
prevEl: n.querySelector(".home_category__prev"),
},
});
});