<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fading Slideshow (795x140)</title>
    <style>
        body {
            font-family: sans-serif;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        /* --- MODIFIED --- */
        /* Set the container to the exact size of your images */
        .slideshow-container {
            width: 795px;
            height: 140px;
            position: relative;
            overflow: hidden;
            background-color: #000;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            border-radius: 8px;
        }

        .slideshow-container img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Ensures the image covers the area */
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 1.5s ease-in-out; /* This creates the fade effect */
        }

        .slideshow-container img.visible {
            opacity: 1; /* This class makes the current image visible */
        }
    </style>
</head>
<body>

    <div id="slideshow" class="slideshow-container">
        </div>

    <script>
        (function() {
            // --- SETTINGS ---
            const FADE_INTERVAL_SECONDS = 5; // Time each slide is visible

            // --- MODIFIED ---
            // Replaced with 3 images of the correct size (795x140)
            // You can replace these URLs with your own image paths.
            const images = [
                'https://picsum.photos/795/140?random=1', // Placeholder Image 1
                'https://picsum.photos/795/140?random=2', // Placeholder Image 2
                'https://picsum.photos/795/140?random=3'  // Placeholder Image 3
            ];

            // --- SLIDESHOW LOGIC (No changes needed here) ---
            const container = document.getElementById('slideshow');
            let currentIndex = 0;

            // Create and add image elements to the page
            images.forEach((src, index) => {
                const img = document.createElement('img');
                img.src = src;
                if (index === 0) {
                    img.classList.add('visible'); // Make the first image visible initially
                }
                container.appendChild(img);
            });

            const imageElements = container.querySelectorAll('img');

            function rotateImages() {
                // This function handles the fading logic
                if (imageElements.length < 2) return;

                const nextIndex = (currentIndex + 1) % imageElements.length;
                
                // Hide current image
                imageElements[currentIndex].classList.remove('visible');
                
                // Show next image
                imageElements[nextIndex].classList.add('visible');
                
                currentIndex = nextIndex;
            }

            // Start the rotation
            setInterval(rotateImages, FADE_INTERVAL_SECONDS * 1000);
        })();
    </script>

</body>
</html>