// JavaScript for managing image carousels

// Function to show the next image in the carousel
function nextSlide(carouselIndex) {
    const carousel = document.getElementsByClassName('carousel')[carouselIndex];
    const images = carousel.querySelectorAll('.carousel-images img');
    let currentIndex = Array.from(images).findIndex(img => img.style.display === 'block');

    // Hide the current image
    if (currentIndex === -1) currentIndex = 0; // If no image is displayed, show the first one
    images[currentIndex].style.display = 'none';

    // Calculate the next index
    currentIndex = (currentIndex + 1) % images.length; // Loop back to the start if at the end

    // Show the next image
    images[currentIndex].style.display = 'block';
}

// Function to show the previous image in the carousel
function prevSlide(carouselIndex) {
    const carousel = document.getElementsByClassName('carousel')[carouselIndex];
    const images = carousel.querySelectorAll('.carousel-images img');
    let currentIndex = Array.from(images).findIndex(img => img.style.display === 'block');

    // Hide the current image
    if (currentIndex === -1) currentIndex = 0; // If no image is displayed, show the first one
    images[currentIndex].style.display = 'none';

    // Calculate the previous index
    currentIndex = (currentIndex - 1 + images.length) % images.length; // Loop back to the end if at the start

    // Show the previous image
    images[currentIndex].style.display = 'block';
}

// Initialize carousels to show the first image
document.querySelectorAll('.carousel-images img').forEach((img, index) => {
    img.style.display = (index === 0) ? 'block' : 'none'; // Show only the first image
});