49 lines
1.6 KiB
JavaScript
49 lines
1.6 KiB
JavaScript
const carouselContainer = document.querySelector('.carousel-container');
|
|
const imageRow = document.querySelector('.image-row');
|
|
let imageItems = imageRow.querySelectorAll('.col-md-3');
|
|
const numberOfVisible = 4; // Number of images to show at a time
|
|
let scrollPosition = 0;
|
|
let imageWidth;
|
|
const slideDuration = 1000; // Time in milliseconds for one slide (adjust as needed)
|
|
const slideInterval = 5000; // Time in milliseconds between slides (adjust as needed)
|
|
let isAnimating = false;
|
|
|
|
function updateCarousel() {
|
|
if (imageItems.length > 0) {
|
|
imageWidth = imageItems[0].offsetWidth;
|
|
}
|
|
}
|
|
|
|
function slideCarousel() {
|
|
if (!isAnimating && imageWidth) {
|
|
isAnimating = true;
|
|
scrollPosition += imageWidth;
|
|
imageRow.style.transform = `translateX(-${scrollPosition}px)`;
|
|
|
|
setTimeout(() => {
|
|
const firstItem = imageRow.firstElementChild;
|
|
imageRow.appendChild(firstItem);
|
|
imageRow.style.transition = 'none'; // Temporarily disable transition for the reset
|
|
imageRow.style.transform = `translateX(0px)`;
|
|
scrollPosition = 0;
|
|
// Force reflow to apply the style change immediately
|
|
imageRow.offsetHeight;
|
|
imageRow.style.transition = ''; // Re-enable the transition
|
|
imageItems = imageRow.querySelectorAll('.col-md-3');
|
|
isAnimating = false;
|
|
}, slideDuration);
|
|
}
|
|
}
|
|
|
|
function startSlidingCarousel() {
|
|
setInterval(slideCarousel, slideInterval);
|
|
}
|
|
|
|
function initializeCarousel() {
|
|
updateCarousel();
|
|
startSlidingCarousel();
|
|
|
|
window.addEventListener('resize', updateCarousel);
|
|
}
|
|
|
|
initializeCarousel(); |