48 lines
1.8 KiB
JavaScript
48 lines
1.8 KiB
JavaScript
// JavaScript for autoscrolling all carousels simultaneously
|
|
const carouselContainers = document.querySelectorAll('.carousel-container');
|
|
const carousels = [];
|
|
|
|
carouselContainers.forEach(container => {
|
|
const carouselList = container.querySelector('.carousel-list');
|
|
const items = carouselList.getElementsByClassName('carousel-item');
|
|
const itemHeight = items[0].offsetHeight;
|
|
const totalItems = items.length;
|
|
let currentIndex = 0;
|
|
let isResetting = false;
|
|
|
|
// Push each carousel object into an array
|
|
carousels.push({
|
|
carouselList,
|
|
itemHeight,
|
|
totalItems,
|
|
currentIndex,
|
|
isResetting
|
|
});
|
|
});
|
|
|
|
function scrollAllCarousels() {
|
|
carousels.forEach(carousel => {
|
|
carousel.currentIndex++;
|
|
if (carousel.currentIndex === carousel.totalItems) {
|
|
carousel.isResetting = true;
|
|
carousel.currentIndex = 0;
|
|
carousel.carouselList.style.transition = 'top 0.5s ease-in-out'; // Enable transition for smooth scrolling
|
|
carousel.carouselList.style.top = `${-carousel.itemHeight}px`; // Start scroll animation
|
|
}
|
|
if (carousel.isResetting && carousel.currentIndex === 0) {
|
|
// If resetting and back to the top, reset the top position instantly without animation
|
|
carousel.isResetting = false;
|
|
carousel.carouselList.style.transition = 'none'; // Disable transition for instant reset
|
|
carousel.carouselList.style.top = '0px'; // Reset to the top instantly
|
|
setTimeout(() => {
|
|
carousel.carouselList.style.transition = ''; // Re-enable transition
|
|
}, 50); // Add a slight delay before re-enabling transition to ensure it takes effect
|
|
}
|
|
const displacement = -carousel.currentIndex * carousel.itemHeight;
|
|
carousel.carouselList.style.top = `${displacement}px`;
|
|
});
|
|
}
|
|
|
|
// Set interval for autoscrolling all carousels simultaneously
|
|
setInterval(scrollAllCarousels, 3000);
|