Preskočiť na obsah
const slider = document.querySelector('.slider');
const prevBtn = document.querySelector('.slider-btn.prev');
const nextBtn = document.querySelector('.slider-btn.next');
let scrollAmount = 0;
const cardWidth = 416 + 32; // Šírka kartičky + rozostup medzi nimi
const maxScroll = slider.scrollWidth - slider.clientWidth;
// Automatický posun slidera
let autoScroll = setInterval(() => {
scrollAmount = scrollAmount < maxScroll ? scrollAmount + cardWidth : 0;
slider.style.transform = `translateX(-${scrollAmount}px)`;
}, 3000);
// Manuálny posun doľava
prevBtn.addEventListener('click', () => {
clearInterval(autoScroll); // Zastavenie automatického scrollovania pri manuálnom posune
scrollAmount = Math.max(scrollAmount - cardWidth, 0);
slider.style.transform = `translateX(-${scrollAmount}px)`;
restartAutoScroll();
});
// Manuálny posun doprava
nextBtn.addEventListener('click', () => {
clearInterval(autoScroll);
scrollAmount = Math.min(scrollAmount + cardWidth, maxScroll);
slider.style.transform = `translateX(-${scrollAmount}px)`;
restartAutoScroll();
});
// Reštartovanie automatického posunu po manuálnom posune
function restartAutoScroll() {
autoScroll = setInterval(() => {
scrollAmount = scrollAmount < maxScroll ? scrollAmount + cardWidth : 0;
slider.style.transform = `translateX(-${scrollAmount}px)`;
}, 3000);
}
