Implement image carousel functionality with auto-forward and auto-backward features

Baba05206 · Baba05206 · commit 532d29e70145 · 2025-12-02T06:41:16.000Z
diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html
@@ -3,12 +3,16 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title here</title>
+    <title>Image carousel</title>
     <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>
+
+    <button type="button" id="auto-forward">Auto Forward</button>
+    <button type="button" id="auto-backward">Auto Backward</button>
+    <button type="button" id="stop">Stop</button>
   </body>
 </html>
diff --git a/Sprint-3/slideshow/slideshow.js b/Sprint-3/slideshow/slideshow.js
@@ -1,8 +1,61 @@
 const images = [
-    "./assets/cute-cat-a.png",
-    "./assets/cute-cat-b.jpg",
-    "./assets/cute-cat-c.jpg",
+  "./assets/cute-cat-a.png",
+  "./assets/cute-cat-b.jpg",
+  "./assets/cute-cat-c.jpg",
 ];
 
+//Write your code here
+let currentIndex = 0;
+let intervalId = null;
 
-// Write your code here
+const imgElement = document.getElementById("carousel-img");
+const forwardBtn = document.getElementById("forward-btn");
+const backwardBtn = document.getElementById("backward-btn");
+
+const autoForwardBtn = document.getElementById("auto-forward");
+const autoBackwardBtn = document.getElementById("auto-backward");
+const stopBtn = document.getElementById("stop");
+
+function updateImage() {
+  imgElement.src = images[currentIndex];
+}
+
+function moveForward() {
+  currentIndex = (currentIndex + 1) % images.length;
+  updateImage();
+}
+
+function moveBackward() {
+  currentIndex = (currentIndex - 1 + images.length) % images.length;
+  updateImage();
+}
+
+forwardBtn.addEventListener("click", moveForward);
+backwardBtn.addEventListener("click", moveBackward);
+
+// ---- AUTOMATIC SLIDESHOW ----
+
+function startAuto(direction) {
+  stopAuto(); // clear any previous interval
+
+  // Disable auto buttons
+  autoForwardBtn.disabled = true;
+  autoBackwardBtn.disabled = true;
+
+  intervalId = setInterval(() => {
+    direction === "forward" ? moveForward() : moveBackward();
+  }, 2000);
+}
+
+function stopAuto() {
+  clearInterval(intervalId);
+  intervalId = null;
+
+  // Re-enable buttons
+  autoForwardBtn.disabled = false;
+  autoBackwardBtn.disabled = false;
+}
+
+autoForwardBtn.addEventListener("click", () => startAuto("forward"));
+autoBackwardBtn.addEventListener("click", () => startAuto("backward"));
+stopBtn.addEventListener("click", stopAuto);
