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

    attach: function (context, settings) {
      let sliders = once('pingPongSlider', '.slider', context);
      sliders.forEach((slider) =>  {
        // 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);