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();