Custom arrow counter Elementor

Custom

document.addEventListener("DOMContentLoaded", function () {

  // =========================================
  // CONFIG
  // =========================================

  const sliders = [

    {
      id: "#loop-popular-ours",
      arrows: ".swiper-popular-ours",
//       counter: ".loop-popular-ours-counter",
    },
  
    {
      id: "#loop-promo",
//       counter: ".loop-promo-counter",
    },

    {
      id: "#loop-services",
//       counter: ".loop-services-counter",
    },

  ];


  // =========================================
  // INIT
  // =========================================

  sliders.forEach((config) => {
    initSwiper(config);
  });


  // =========================================
  // MAIN
  // =========================================

  function initSwiper({ id, arrows = null, counter = null }) {

    let tries = 0;

    const timer = setInterval(() => {

      tries++;

      const swiperEl = document.querySelector(`${id} .swiper`);

      if (!swiperEl || !swiperEl.swiper) {

        if (tries > 50) {
          clearInterval(timer);
        }

        return;
      }

      clearInterval(timer);

      const swiper = swiperEl.swiper;


      // =========================================
      // ARROWS
      // =========================================

      if (arrows) {

        document.addEventListener("click", (e) => {

          const nextBtn = e.target.closest(
            `${arrows} .arrow-right`
          );

          const prevBtn = e.target.closest(
            `${arrows} .arrow-left`
          );

          if (!nextBtn && !prevBtn) return;

          e.preventDefault();
          e.stopPropagation();

          if (nextBtn) swiper.slideNext();
          if (prevBtn) swiper.slidePrev();

        });

      }


      // =========================================
      // COUNTER
      // =========================================

      if (counter) {

        const counterEl = document.querySelector(counter);

        if (!counterEl) return;

        const cellsWrap = counterEl.querySelector(".cells");

        if (!cellsWrap) return;

        const total = swiperEl.querySelectorAll(
          ".swiper-slide:not(.swiper-slide-duplicate)"
        ).length;

        // генерация линий
        cellsWrap.innerHTML = "";

        for (let i = 0; i < total; i++) {

          const cell = document.createElement("div");

          cell.classList.add("cell");

          if (i === swiper.realIndex) {
            cell.classList.add("active");
          }

          cellsWrap.appendChild(cell);

        }


        function updateCounter() {

          const cells = cellsWrap.querySelectorAll(".cell");

          cells.forEach((cell, index) => {

            cell.classList.toggle(
              "active",
              index === swiper.realIndex
            );

          });

        }

        swiper.on("slideChange", updateCounter);

        updateCounter();

      }

    }, 200);

  }

});