Implement slideshow

Author: KhotKeys

Sprint-3/slideshow/index.html

@@ -3,12 +3,44 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title here</title>
+    <title>Cat Slideshow 🐱</title>
+    <link rel="stylesheet" href="style.css" />
     <script defer src="slideshow.js"></script>
   </head>
   <body>
-    <img id="carousel-img" src="./assets/cute-cat-a.png" alt="cat-pic" />
-    <button type="button" id="backward-btn">Backwards</button>
-    <button type="button" id="forward-btn">Forward</button>
+    <div class="slideshow-wrapper">
+      <h1 class="title">🐱 Cat Slideshow</h1>
+
+      <div class="image-container">
+        <img id="carousel-img" src="./assets/cute-cat-a.png" alt="cat-pic" />
+        <span id="image-counter" class="image-counter">1 / 3</span>
+      </div>
+
+      <div class="controls">
+        <button type="button" id="backward-btn">&#8592; Back</button>
+        <button type="button" id="forward-btn">Forward &#8594;</button>
+      </div>
+
+      <div class="auto-controls">
+        <button type="button" id="auto-forward">&#9654; Auto Play</button>
+        <button type="button" id="auto-backward">&#9664; Auto Reverse</button>
+        <button type="button" id="stop">&#9646;&#9646; Stop</button>
+      </div>
+
+      <div class="delay-control">
+        <label for="delay-input">Delay between images:</label>
+        <div class="delay-input-row">
+          <input
+            type="range"
+            id="delay-input"
+            min="500"
+            max="5000"
+            step="500"
+            value="2000"
+          />
+          <span id="delay-display">2.0s</span>
+        </div>
+      </div>
+    </div>
   </body>
 </html>

Sprint-3/slideshow/slideshow.js

@@ -4,5 +4,59 @@ const images = [
     "./assets/cute-cat-c.jpg",
 ];
 
+let currentIndex = 0;
+let intervalId = null;
 
-// Write your code here
+function getDelay() {
+    return parseInt(document.getElementById("delay-input").value, 10);
+}
+
+function updateCounter() {
+    document.getElementById("image-counter").textContent =
+        `${currentIndex + 1} / ${images.length}`;
+}
+
+function showImage(index) {
+    document.getElementById("carousel-img").src = images[index];
+    updateCounter();
+}
+
+function moveForward() {
+    currentIndex = (currentIndex + 1) % images.length;
+    showImage(currentIndex);
+}
+
+function moveBackward() {
+    currentIndex = (currentIndex - 1 + images.length) % images.length;
+    showImage(currentIndex);
+}
+
+function setAutoButtons(disabled) {
+    document.getElementById("auto-forward").disabled = disabled;
+    document.getElementById("auto-backward").disabled = disabled;
+}
+
+document.getElementById("forward-btn").addEventListener("click", moveForward);
+document.getElementById("backward-btn").addEventListener("click", moveBackward);
+
+document.getElementById("auto-forward").addEventListener("click", () => {
+    setAutoButtons(true);
+    intervalId = setInterval(moveForward, getDelay());
+});
+
+document.getElementById("auto-backward").addEventListener("click", () => {
+    setAutoButtons(true);
+    intervalId = setInterval(moveBackward, getDelay());
+});
+
+document.getElementById("stop").addEventListener("click", () => {
+    clearInterval(intervalId);
+    intervalId = null;
+    setAutoButtons(false);
+});
+
+// Update the delay display label when the slider moves
+document.getElementById("delay-input").addEventListener("input", (e) => {
+    const seconds = (e.target.value / 1000).toFixed(1);
+    document.getElementById("delay-display").textContent = `${seconds}s`;
+});