I am using Swiper.js to make a carousel that makes use of the renderBullet function provided by Swiper. My current script works great for one instance, the issue I have is that if I want to have multiple instances of this swiper my current code will get confused with the forEach array I am using to pass through the data attributes in order to display the correct pagination hyperlinks.

import Swiper from "swiper";
import { Navigation, Pagination, EffectFade } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/effect-fade";

const titles = document.querySelectorAll(".pag-swiper .swiper-slide");

const title = [];
titles.forEach((element) => {
  title.push(element.dataset.title);
});

const swiper = new Swiper(".pag-swiper .js-swiper", {
  modules: [Navigation, Pagination, EffectFade],
  effect: "fade",
  fadeEffect: {
    crossFade: true,
  },
  pagination: {
    el: ".pag-nav",
    clickable: true,
    renderBullet: function (index, className) {
      return '<button class="link ' + className + '">' + title[index] + "</button>";
    },
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

Where the HTML markup is:

   <div class="pag-swiper">
         <div class="swiper js-swiper">
            <div class="swiper-wrapper">
                 <div class="swiper-slide" data-title="Pagination link one">
                    Slide 1
                 </div>
                 <div class="swiper-slide" data-title="Pagination link two">
                    Slide 2
                 </div>
             </div>
        </div>
    </div>

I need to almost use the forEach to build this entire swiper based upon .pag-swiper .js-swiper but I can’t work out the syntax for it. At the moment the whole thing just breaks unable to render any pagination bullets at all.