Update index.html

index.html

@@ -56,6 +56,9 @@
             font-size: 18px;
             cursor: pointer;
         }
+        .nav-buttons button:hover {
+            background-color: #888;
+        }
         .main {
             display: flex;
             height: 100%;
@@ -111,6 +114,7 @@
         const nextBtn = document.getElementById('next-btn');
         let data = [];
         let currentIndex = 0;
+
         // Fetch slide configuration
         async function fetchSlideConfig() {
             try {
@@ -122,20 +126,28 @@
                 console.error('Error loading slide configuration:', error);
             }
         }
+
         function loadSlide(index) {
             if (data.length === 0) return;
             const slide = data[index];
             slideTitle.textContent = slide.id.replace('_', ' ');
             slideImage.src = slide.image;
         }
+
         prevBtn.addEventListener('click', () => {
-            currentIndex = (currentIndex - 1 + data.length) % data.length;
-            loadSlide(currentIndex);
+            if (data.length > 0) {
+                currentIndex = (currentIndex - 1 + data.length) % data.length;
+                loadSlide(currentIndex);
+            }
         });
+
         nextBtn.addEventListener('click', () => {
-            currentIndex = (currentIndex + 1) % data.length;
-            loadSlide(currentIndex);
+            if (data.length > 0) {
+                currentIndex = (currentIndex + 1) % data.length;
+                loadSlide(currentIndex);
+            }
         });
+
         // Initialize
         fetchSlideConfig();
     </script>