diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html
index 50f2eb1c0..6be32cd53 100644
--- a/Sprint-3/slideshow/index.html
+++ b/Sprint-3/slideshow/index.html
@@ -3,12 +3,26 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title here</title>
-    <script defer src="slideshow.js"></script>
+    <title>Image carousel</title>
   </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>
+    <h1>Image Carousel</h1>
+    <p>Click the buttons to navigate through the images.</p>
+    <main class="carousel-container">
+      <div class="carousel">
+        <button id="backward-btn">Backward</button>
+        <img id="carousel-img" src="" alt="Image carousel" loading="lazy"/>
+        <button id="forward-btn">Forward</button>
+      </div>
+      <div class="controls">
+        <button id="auto-forward">Auto Forward</button>
+        <button id="auto-backward">Auto Backward</button>
+        <button id="stop">Stop Auto</button>
+        <label for="delayInput">Delay (seconds):</label>
+        <input type="number" id="delayInput" min="0.1" step="0.1" value="2" />
+      </div>
+    </main>
+
+    <script src="slideshow.js"></script>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/Sprint-3/slideshow/slideshow.js b/Sprint-3/slideshow/slideshow.js
index 063ceefb5..b29307e70 100644
--- a/Sprint-3/slideshow/slideshow.js
+++ b/Sprint-3/slideshow/slideshow.js
@@ -1,8 +1,68 @@
+const carouselImg = 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");
+
 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",
 ];
 
+let currentIndex = 0;
+
+let autoPlayIntervalId;
+const intervalTime = 2000;
+
+function updateImage() {
+  carouselImg.src = images[currentIndex];
+}
+
+function setAutoPlayButtonState(disabled) {
+  autoForwardBtn.disabled = disabled;
+  autoBackwardBtn.disabled = disabled;
+  forwardBtn.disabled = disabled;
+  backwardBtn.disabled = disabled;
+}
+
+function startAutoForward() {
+  stopAutoPlay();
+  setAutoPlayButtonState(true);
+  autoPlayIntervalId = setInterval(() => {
+    currentIndex = (currentIndex + 1) % images.length;
+    updateImage();
+  }, intervalTime);
+}
+
+function startAutoBackward() {
+  stopAutoPlay();
+  setAutoPlayButtonState(true);
+  autoPlayIntervalId = setInterval(() => {
+    currentIndex = (currentIndex - 1 + images.length) % images.length;
+    updateImage();
+  }, intervalTime);
+}
+
+function stopAutoPlay() {
+  clearInterval(autoPlayIntervalId);
+  setAutoPlayButtonState(false);
+}
+
+forwardBtn.addEventListener("click", () => {
+  currentIndex = (currentIndex + 1) % images.length;
+  updateImage();
+});
+
+backwardBtn.addEventListener("click", () => {
+  currentIndex = (currentIndex - 1 + images.length) % images.length;
+  updateImage();
+});
+
+autoForwardBtn.addEventListener("click", startAutoForward);
+autoBackwardBtn.addEventListener("click", startAutoBackward);
+stopBtn.addEventListener("click", stopAutoPlay);
 
-// Write your code here
\ No newline at end of file
+updateImage();
\ No newline at end of file
