$(document).ready(function() {
    $.getJSON('/load_images.php', function(images) {
        if (images.length) {
            images.forEach(function(image, index) {
                $('#slideshow').append('<img src="' + image + '" alt="Background Image ' + (index + 1) + '">');
            });

            let currentIndex = 0;
            const imagesList = $('.slideshow img');
            const totalImages = imagesList.length;

            function showNextImage() {
                imagesList.eq(currentIndex).css('opacity', 0);
                currentIndex = (currentIndex + 1) % totalImages;
                imagesList.eq(currentIndex).css('opacity', 1);
            }

            imagesList.eq(0).css('opacity', 1); // Show the first image initially
            setInterval(showNextImage, 3000); // Change image every 3 seconds
        }
    });
});