diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html
index 50f2eb1c0..f9858064f 100644
--- a/Sprint-3/slideshow/index.html
+++ b/Sprint-3/slideshow/index.html
@@ -3,12 +3,57 @@
   <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>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        text-align: center;
+        padding: 20px;
+      }
+      
+      #carousel-img {
+        max-width: 600px;
+        width: 100%;
+        height: 400px;
+        object-fit: cover;
+        border: 2px solid #333;
+        margin-bottom: 20px;
+      }
+      
+      button {
+        margin: 5px;
+        padding: 10px 20px;
+        font-size: 16px;
+        cursor: pointer;
+      }
+      
+      button:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+      
+      .controls {
+        margin-bottom: 10px;
+      }
+    </style>
   </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>
+ <body>
+    <h1>Image Carousel</h1>
+    
+    <img id="carousel-img" src="" alt="Carousel image" />
+    
+    <div class="controls">
+      <button type="button" id="backward-btn">◀ Backward</button>
+      <button type="button" id="forward-btn">Forward ▶</button>
+    </div>
+    
+    <div class="controls">
+      <button type="button" id="auto-backward">⏪ Auto Backward</button>
+      <button type="button" id="stop">⏹ Stop</button>
+      <button type="button" id="auto-forward">Auto Forward ⏩</button>
+    </div>
+    
+    <script src="slideshow.js"></script>
   </body>
 </html>
+
diff --git a/Sprint-3/slideshow/slideshow.js b/Sprint-3/slideshow/slideshow.js
index 063ceefb5..cf6857adf 100644
--- a/Sprint-3/slideshow/slideshow.js
+++ b/Sprint-3/slideshow/slideshow.js
@@ -4,5 +4,89 @@ const images = [
     "./assets/cute-cat-c.jpg",
 ];
 
+// Write your code here
 
-// Write your code here
\ No newline at end of file
+// 2. declare global variables
+let currentIndex = 0; // current image index
+let intervalId = null; // ID timer (for stop)
+
+// 3. find DOM elements
+const img = 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");
+
+// 4. function reloadImage
+img.src = images[currentIndex];
+   
+
+// 5. function nextImage
+function goForward() {
+    currentIndex++;
+
+    // cycle if get end -> back to start
+    if (currentIndex >= images.length) {
+        currentIndex = 0;
+    }
+    img.src = images[currentIndex];
+}
+
+// 6. function previous image
+function goBackward() {
+
+    // cycle if get start -> go to end
+    currentIndex--;
+    if (currentIndex < 0) {
+        currentIndex = images.length - 1;
+    }
+    img.src = images[currentIndex];
+}
+
+function startAutoForward() {
+    // stop previous interval (if it was)
+    stopAuto();
+
+    // start new interval
+    intervalId = setInterval(goForward, 2000);
+
+    // disable auto buttons
+    autoForwardBtn.disabled = true;
+    autoBackwardBtn.disabled = true;
+}
+
+// 8. start auto backward
+function startAutoBackward() {
+    // stop previous interval
+    stopAuto();
+
+    // start new interval
+    intervalId = setInterval(goBackward, 2000);
+
+    // disable auto buttons
+    autoForwardBtn.disabled = true;
+    autoBackwardBtn.disabled = true;
+}
+
+// 9. stop auto
+function stopAuto() {
+    if (intervalId !== null) {
+        clearInterval(intervalId);
+        intervalId = null;
+    }
+
+    // enable auto buttons
+    autoForwardBtn.disabled = false;
+    autoBackwardBtn.disabled = false;
+}
+
+// 10. event listeners
+forwardBtn.addEventListener("click", goForward);
+backwardBtn.addEventListener("click", goBackward);
+autoForwardBtn.addEventListener("click", startAutoForward);
+autoBackwardBtn.addEventListener("click", startAutoBackward);
+stopBtn.addEventListener("click", stopAuto);
+
+// 11. show first image when load
+img.src = images[currentIndex];
\ No newline at end of file
