<?php
include 'dbconn.php';

$sliders = $conn->query("SELECT * FROM photos");
?>

<!DOCTYPE html>
<html>
<head>
    <title>Slider</title>
    <style>
        .slider-container {
            width: 80%;
            margin: auto;
            overflow: hidden;
        }
        .slide {
            display: none;
            text-align: center;
        }
        img {
            width: 100%;
            max-width: 800px;
        }
    </style>
    <script>
        let index = 0;
        function showSlides() {
            let slides = document.getElementsByClassName("slide");
            for (let i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            index++;
            if (index > slides.length) { index = 1; }
            slides[index-1].style.display = "block";
            setTimeout(showSlides, 3000);
        }
        window.onload = showSlides;
    </script>
</head>
<body>

<div class="slider-container">
    <?php while ($slide = $sliders->fetch_assoc()): ?>
        <div class="slide">
            <img src="uploads/<?php echo $slide['image']; ?>" alt="<?php echo $slide['title']; ?>">
            <h3><?php echo $slide['title']; ?></h3>
        </div>
    <?php endwhile; ?>
</div>

</body>
</html>
