const moreServicessContainers = document.querySelectorAll(
  "[data-more-servicess-container]",
);

moreServicessContainers.forEach((container) => {
  const swiperElement = container.querySelector(".swiper.more-servicess");

  const prevButton = container.querySelector("[data-prev-slide]");

  const nextButton = container.querySelector("[data-next-slide]");

  if (
    !swiperElement ||
    swiperElement.classList.contains("swiper-initialized")
  ) {
    return;
  }

  new Swiper(swiperElement, {
    slidesPerView: 1.025,
    spaceBetween: 16,
    grabCursor: true,

    loop: true,
    speed: 15000,

    autoplay: {
      delay: 0,
      disableOnInteraction: false,
      pauseOnMouseEnter: false,
    },

    navigation: {
      prevEl: prevButton,
      nextEl: nextButton,
    },

    breakpoints: {
      768: {
        slidesPerView: 2,
        spaceBetween: 20,
      },

      992: {
        slidesPerView: 4,
        spaceBetween: 24,
      },
    },
  });
});