(function (Drupal, once) {
  Drupal.behaviors.pingPongSlider = {

    attach: function (context, settings) {
      let sliders = once('pingPongSlider', '.swiper', context);
      sliders.forEach((slider) =>  {
        const swiper = new Swiper(slider, {
          // Optional parameters
          loop: true,
          autoplay: {
           delay: 5000,
          },

          // If we need pagination
          pagination: {
            el: '.swiper-pagination',
          },

          // Navigation arrows
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },

          // And if we need scrollbar
          scrollbar: {
            el: '.swiper-scrollbar',
          },
        });
        // // get the slides
        // let slides = slider.querySelectorAll('.slide');
        // slides[0].classList.add("active");
        // if (slides.length <= 1) {
        //   return;
        // }
        // changeSlide(slider);
      });

      // function changeSlide(sliderDiv, loop = 1) {
      //   setTimeout(() => {
      //     let slideCount = sliderDiv.querySelectorAll('.slide').length;
      //     let activeSlide = sliderDiv.querySelector('.slide.active');
      //     let nextSlide = activeSlide.nextElementSibling;
      //     if (loop == slideCount) {
      //       nextSlide = sliderDiv.querySelectorAll('.slide')[0];
      //       return;
      //       // get the first slide
      //     }
      //     else {
      //       loop++;
      //       activeSlide.classList.toggle('active');
      //       nextSlide.classList.toggle('active');
      //       changeSlide(sliderDiv, loop);
      //     }
      //   }, 10000);
      // }
    }

  };
})(Drupal, once);