document.addEventListener("DOMContentLoaded", () => {
  document
    .querySelectorAll(".olympus-block-testimonial")
    .forEach((slider_section) => {
      const btnLeft = slider_section.querySelector(
        ".olympus-block-testimonial__button__slider.left"
      );
      const btnRight = slider_section.querySelector(
        ".olympus-block-testimonial__button__slider.right"
      );

      let splide;
      const slider = slider_section.querySelector(".splide");
      if (window.innerWidth > 768) {
        splide = new Splide(slider, {
          type: "loop",
          perPage: slider.dataset.perpage,
          autoplay: true,
          gap: "1rem",
          arrows: false,
        });
      } else {
        splide = new Splide(slider, {
          type: "loop",
          perPage: 1,
          autoplay: true,
          gap: "1rem",
          arrows: false,
        });
      }

      splide.mount();

      addEventListener("resize", (e) => {
        if (window.innerWidth > 768) {
          const slider = slider_section.querySelector(".splide");
          splide.options.perPage = slider.dataset.perpage;
        }

        if (window.innerWidth <= 768) {
          splide.options.perPage = 1;
        }
        splide.refresh();
      });

      btnRight.addEventListener("click", () => {
        splide.go("+1");
      });

      btnLeft.addEventListener("click", () => {
        splide.go("-1");
      });
    });
});
