37 lines
1.6 KiB
JavaScript
37 lines
1.6 KiB
JavaScript
|
document.querySelectorAll('.carousel').forEach(carousel => {
|
||
|
|
const slides = carousel.querySelectorAll('.carousel-slide');
|
||
|
|
const dotsContainer = carousel.querySelector('.carousel-dots');
|
||
|
|
const prevBtn = carousel.querySelector('.carousel-prev');
|
||
|
|
const nextBtn = carousel.querySelector('.carousel-next');
|
||
|
|
const autoplayDelay = parseInt(carousel.dataset.autoplay) || 4000;
|
||
|
|
let current = 0;
|
||
|
|
let interval;
|
||
|
|
|
||
|
|
slides.forEach((_, i) => {
|
||
|
|
const dot = document.createElement('button');
|
||
|
|
dot.className = 'carousel-dot' + (i === 0 ? ' active' : '');
|
||
|
|
dot.addEventListener('click', () => goTo(i));
|
||
|
|
dotsContainer.appendChild(dot);
|
||
|
|
});
|
||
|
|
|
||
|
|
function goTo(index) {
|
||
|
|
slides[current].classList.remove('active');
|
||
|
|
dotsContainer.children[current].classList.remove('active');
|
||
|
|
current = (index + slides.length) % slides.length;
|
||
|
|
slides[current].classList.add('active');
|
||
|
|
dotsContainer.children[current].classList.add('active');
|
||
|
|
}
|
||
|
|
|
||
|
|
prevBtn.addEventListener('click', e => { e.stopPropagation(); goTo(current - 1); resetAutoplay(); });
|
||
|
|
nextBtn.addEventListener('click', e => { e.stopPropagation(); goTo(current + 1); resetAutoplay(); });
|
||
|
|
|
||
|
|
function startAutoplay() { interval = setInterval(() => goTo(current + 1), autoplayDelay); }
|
||
|
|
function resetAutoplay() { clearInterval(interval); startAutoplay(); }
|
||
|
|
|
||
|
|
const hoverTarget = carousel.closest('.group') || carousel.parentElement;
|
||
|
|
hoverTarget.addEventListener('mouseenter', () => clearInterval(interval));
|
||
|
|
hoverTarget.addEventListener('mouseleave', () => startAutoplay());
|
||
|
|
|
||
|
|
startAutoplay();
|
||
|
|
});
|