diff --git a/Sprint-3/slideshow/assets/cute-cat-d.jpg b/Sprint-3/slideshow/assets/cute-cat-d.jpg
new file mode 100644
index 00000000..2257afde
Binary files /dev/null and b/Sprint-3/slideshow/assets/cute-cat-d.jpg differ
diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html
index 50f2eb1c..c41ae0a8 100644
--- a/Sprint-3/slideshow/index.html
+++ b/Sprint-3/slideshow/index.html
@@ -3,12 +3,17 @@
   <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>
+    <div>
+      <button type="button" id="auto-backward-btn">Auto Backwards</button>
+      <button type="button" id="backward-btn">Backwards</button>
+      <button type="button" id="stop-btn">Stop</button>
+      <button type="button" id="forward-btn">Forward</button>
+      <button type="button" id="auto-forward-btn">Auto Forward</button>
+    </div>
   </body>
 </html>
diff --git a/Sprint-3/slideshow/slideshow.js b/Sprint-3/slideshow/slideshow.js
index 063ceefb..48eadfbc 100644
--- a/Sprint-3/slideshow/slideshow.js
+++ b/Sprint-3/slideshow/slideshow.js
@@ -2,7 +2,89 @@ const images = [
     "./assets/cute-cat-a.png",
     "./assets/cute-cat-b.jpg",
     "./assets/cute-cat-c.jpg",
+    "./assets/cute-cat-d.jpg",
 ];
 
 
-// Write your code here
\ No newline at end of file
+// Write your code here
+//LEVEL 1 implementation
+const body = document.querySelector("body");
+const image = document.getElementById("carousel-img");
+const forwardButton = document.getElementById("forward-btn");
+const backwardButton = document.getElementById("backward-btn");
+const stopButton = document.getElementById("stop-btn");
+const autoForwardButton = document.getElementById("auto-forward-btn");
+const autoBackwardButton = document.getElementById("auto-backward-btn");
+
+let forwardsRunning = null;
+let backwardsRunning = null;
+let index = 0;
+image.src = images[index];
+
+//separate moving mechanism into functions since they are used many times
+function moveForward(imagesArray) {
+    //to get 0 as an index (index + imagesArray.length)%imagesArray.length
+    //increment by 1 to move
+    index = (index + imagesArray.length + 1) % imagesArray.length;
+    image.src = imagesArray[index];
+
+}
+
+function moveBackwards(imagesArray) {
+
+    index = (index + imagesArray.length - 1) % imagesArray.length;
+    image.src = imagesArray[index];
+
+
+}
+function carousel(imagesArray) {
+
+
+    body.style.textAlign = "center";
+    image.style.height = "300px";
+
+    forwardButton.addEventListener("click", function () {
+        moveForward(imagesArray);
+
+    })
+
+    backwardButton.addEventListener("click", function () {
+        moveBackwards(imagesArray);
+    })
+
+    //Level 2 implementation
+
+
+    autoForwardButton.addEventListener("click", function name() {
+        if (forwardsRunning) {
+            clearInterval(forwardsRunning);
+            forwardsRunning = null;
+        }
+
+        forwardsRunning = setInterval(() => {
+            moveForward(imagesArray);
+        }, 5000);
+    });
+
+    autoBackwardButton.addEventListener("click", function () {
+
+        if (backwardsRunning) {
+            clearInterval(backwardsRunning);
+            backwardsRunning = null;
+        }
+
+        backwardsRunning = setInterval(function () {
+            moveBackwards(imagesArray);
+        }, 5000);
+
+    })
+    //clear both to stop it
+    stopButton.addEventListener("click", function () {
+        clearInterval(backwardsRunning);
+        clearInterval(forwardsRunning);
+
+    })
+}
+
+carousel(images);
+
