(function () { const slider = document.getElementById('vsSlider'); const slides = Array.from(slider.querySelectorAll('.vs-slide')); const dotsWrap = document.getElementById('vsDots'); let current = 0; let imgTimer = null; const IMG_DURATION = 5000; // 5 segundos para cada imagen slides.forEach((_, i) => { const d = document.createElement('div'); d.className = 'vs-dot' + (i === 0 ? ' active' : ''); d.addEventListener('click', () => goTo(i)); dotsWrap.appendChild(d); }); function goTo(index) { if (imgTimer) clearTimeout(imgTimer); // Detener video actual si lo hay const currentVid = slides[current].querySelector('video'); if (currentVid) currentVid.pause(); slides[current].classList.remove('active'); dotsWrap.children[current].classList.remove('active'); current = ((index % slides.length) + slides.length) % slides.length; slides[current].classList.add('active'); dotsWrap.children[current].classList.add('active'); const nextVid = slides[current].querySelector('video'); if (nextVid) { nextVid.currentTime = 0; nextVid.play(); } else { // Es una imagen, activar temporizador imgTimer = setTimeout(() => goTo(current + 1), IMG_DURATION); } } slides.forEach((slide, i) => { const vid = slide.querySelector('video'); if (vid) { vid.addEventListener('ended', () => goTo(i + 1)); } }); document.getElementById('vsPrev').addEventListener('click', () => goTo(current - 1)); document.getElementById('vsNext').addEventListener('click', () => goTo(current + 1)); // Iniciar primer slide const firstVid = slides[0].querySelector('video'); if (firstVid) { firstVid.play(); } else { imgTimer = setTimeout(() => goTo(1), IMG_DURATION); } let touchStartX = 0; slider.addEventListener('touchstart', e => { touchStartX = e.changedTouches[0].screenX; }, { passive: true }); slider.addEventListener('touchend', e => { const diff = touchStartX - e.changedTouches[0].screenX; if (Math.abs(diff) > 50) goTo(diff > 0 ? current + 1 : current - 1); }, { passive: true }); })();