39 lines
1.1 KiB
JavaScript
39 lines
1.1 KiB
JavaScript
|
(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);
|
||
|
|
|