Shopping Center CMS Platform

<script>
        (function () {
          const carousels = document.querySelectorAll(".uc-testimonial-carousel");

          carousels.forEach((carousel) => {
            const viewport = carousel.querySelector("[data-uc-carousel-viewport]");
            const track = carousel.querySelector("[data-uc-carousel-track]");
            const slides = Array.from(carousel.querySelectorAll(".uc-testimonial-carousel__slide"));
            const dotsWrap = carousel.querySelector("[data-uc-carousel-dots]");
            const status = carousel.querySelector("[data-uc-carousel-status]");
            let index = 0;
            let startX = 0;
            let currentX = 0;
            let isPointerDown = false;

            if (!viewport || !track || slides.length === 0) return;

            slides.forEach((slide, slideIndex) => {
              slide.setAttribute("aria-label", `${slideIndex + 1} of ${slides.length}`);

              const dot = document.createElement("button");
              dot.className = "uc-testimonial-carousel__dot";
              dot.type = "button";
              dot.setAttribute("role", "tab");
              dot.setAttribute("aria-label", `Show testimonial ${slideIndex + 1}`);
              dot.addEventListener("click", () => goTo(slideIndex));
              dotsWrap.appendChild(dot);
            });

            const dots = Array.from(dotsWrap.children);

            function goTo(nextIndex) {
              index = (nextIndex + slides.length) % slides.length;
              track.style.transform = `translateX(-${index * 100}%)`;

              slides.forEach((slide, slideIndex) => {
                slide.setAttribute("aria-hidden", slideIndex === index ? "false" : "true");
              });

              dots.forEach((dot, dotIndex) => {
                dot.setAttribute("aria-selected", dotIndex === index ? "true" : "false");
                dot.tabIndex = dotIndex === index ? 0 : -1;
              });

              if (status) status.textContent = `Showing testimonial ${index + 1} of ${slides.length}`;
            }

            carousel.querySelectorAll("[data-uc-carousel-prev]").forEach((button) => {
              button.addEventListener("click", () => goTo(index - 1));
            });

            carousel.querySelectorAll("[data-uc-carousel-next]").forEach((button) => {
              button.addEventListener("click", () => goTo(index + 1));
            });

            carousel.addEventListener("keydown", (event) => {
              if (event.key === "ArrowLeft") goTo(index - 1);
              if (event.key === "ArrowRight") goTo(index + 1);
            });

            viewport.addEventListener("pointerdown", (event) => {
              isPointerDown = true;
              startX = event.clientX;
              currentX = startX;
              viewport.setPointerCapture(event.pointerId);
            });

            viewport.addEventListener("pointermove", (event) => {
              if (!isPointerDown) return;
              currentX = event.clientX;
            });

            viewport.addEventListener("pointerup", (event) => {
              if (!isPointerDown) return;
              isPointerDown = false;
              const distance = currentX - startX;

              if (Math.abs(distance) > 48) {
                goTo(distance > 0 ? index - 1 : index + 1);
              }

              viewport.releasePointerCapture(event.pointerId);
            });

            viewport.addEventListener("pointercancel", () => {
              isPointerDown = false;
            });

            goTo(0);
          });
        })();
      </script>