ajout d'indicateurs sur le slide

index.php

@@ -52,6 +52,14 @@ $config = getSiteConfig();
         <?php endforeach; ?>
     </div>
 
+    <?php if (count($carouselImages) > 1): ?>
+    <div class="carousel-indicators">
+        <?php foreach($carouselImages as $index => $image): ?>
+            <div class="indicator <?php echo $index === 0 ? 'active' : ''; ?>"></div>
+        <?php endforeach; ?>
+    </div>
+    <?php endif; ?>
+
     <div class="overlay">
         <h1><?php echo htmlspecialchars($config['site_title']); ?></h1>
         <p><?php echo htmlspecialchars($config['site_description']); ?></p>
@@ -88,6 +96,49 @@ $config = getSiteConfig();
                 setInterval(nextSlide, 5000);
             }
         });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let currentSlide = 0;
+            const slides = document.querySelectorAll('.carousel-slide');
+            const indicators = document.querySelectorAll('.indicator');
+            
+            if (slides.length === 0) return;
+            
+            function showSlide(index) {
+                // Mettre à jour les slides
+                slides.forEach(slide => {
+                    slide.classList.remove('active');
+                });
+                slides[index].classList.add('active');
+                
+                // Mettre à jour les indicateurs
+                indicators.forEach(indicator => {
+                    indicator.classList.remove('active');
+                });
+                indicators[index]?.classList.add('active');
+            }
+
+            function nextSlide() {
+                currentSlide = (currentSlide + 1) % slides.length;
+                showSlide(currentSlide);
+            }
+
+            // Permettre le clic sur les indicateurs
+            indicators.forEach((indicator, index) => {
+                indicator.addEventListener('click', () => {
+                    currentSlide = index;
+                    showSlide(currentSlide);
+                });
+            });
+
+            // Initialiser le premier slide
+            showSlide(0);
+            
+            // Changer de slide toutes les 5 secondes seulement s'il y a plus d'une image
+            if (slides.length > 1) {
+                setInterval(nextSlide, 5000);
+            }
+        });
     </script>
 </body>
 </html>

styles.css

@@ -47,6 +47,33 @@ body {
     filter: brightness(0.6);
 }
 
+.carousel-indicators {
+    position: fixed;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 8px;
+    z-index: 10;
+    background-color: rgba(0, 0, 0, 0.3);
+    padding: 8px;
+    border-radius: 12px;
+    backdrop-filter: blur(4px);
+}
+
+.indicator {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.4);
+    transition: all 0.3s ease;
+    cursor: pointer;
+}
+
+.indicator.active {
+    background-color: #ffffff;
+}
+
 /* Overlay contenu de la page d'accueil */
 .overlay {
     position: fixed;