document.addEventListener('DOMContentLoaded', function (){
document
.querySelectorAll('.VisvakantieCountrySlider, .VisvakantieTypeSlider')
.forEach(slider=> {
const track =
slider.querySelector('.VisvakantieCountrySlider__track') ||
slider.querySelector('[data-slider-track]');
const btnPrev =
slider.querySelector('.VisvakantieCountrySlider__btn--prev') ||
slider.querySelector('[data-slider-prev]');
const btnNext =
slider.querySelector('.VisvakantieCountrySlider__btn--next') ||
slider.querySelector('[data-slider-next]');
if(!track||!btnPrev||!btnNext) return;
let scrollAmount=280;
if(slider.classList.contains('VisvakantieTypeSlider') &&
window.matchMedia('(min-width: 769px)').matches
){
const slide=track.querySelector('.VisvakantieTypeSlider__slide');
if(slide){
const gap=parseInt(getComputedStyle(track).gap||0, 10);
scrollAmount=(slide.offsetWidth + gap) * 3;
}}
btnNext.addEventListener('click', ()=> {
track.scrollBy({ left: scrollAmount, behavior: 'smooth' });
});
btnPrev.addEventListener('click', ()=> {
track.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
});
let isDragging=false;
let startX=0;
let startScrollLeft=0;
track.addEventListener('mousedown', (e)=> {
if(e.button!==0) return;
isDragging=true;
startX=e.pageX;
startScrollLeft=track.scrollLeft;
track.classList.add('is-dragging');
e.preventDefault();
});
track.addEventListener('mousemove', (e)=> {
if(!isDragging) return;
const delta=e.pageX - startX;
track.scrollLeft=startScrollLeft - delta;
});
track.addEventListener('mouseup', ()=> {
isDragging=false;
track.classList.remove('is-dragging');
});
track.addEventListener('mouseleave', ()=> {
isDragging=false;
track.classList.remove('is-dragging');
});
let touchStartX=0;
let touchScrollStart=0;
track.addEventListener('touchstart', (e)=> {
touchStartX=e.touches[0].pageX;
touchScrollStart=track.scrollLeft;
}, { passive: true });
track.addEventListener('touchmove', (e)=> {
const delta=e.touches[0].pageX - touchStartX;
track.scrollLeft=touchScrollStart - delta;
}, { passive: true });
});
});