diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html
index 50f2eb1c0..796c90b1f 100644
--- a/Sprint-3/slideshow/index.html
+++ b/Sprint-3/slideshow/index.html
@@ -1,14 +1,35 @@
-
-
-
-
-
- Title here
-
-
-
- 
-
-
-
-
+body {
+ background-color: rgb(242, 106, 106);
+}
+
+#carousel-img {
+ width: 745px;
+ height: 559px;
+ object-fit: cover;
+ display: block;
+ margin: 0 auto;
+ border-radius: 8px; /* minor visual improvement */
+}
+
+#button-container {
+ display: flex;
+ justify-content: center;
+ gap: 12px; /* slightly smoother spacing */
+ margin-top: 20px;
+}
+
+.button {
+ background-color: bisque;
+ font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
+ font-size: 16px; /* fixing invalid font-size line */
+ font-style: oblique;
+ border-radius: 8px;
+ padding: 10px 24px;
+ cursor: pointer;
+ border: none; /* minor improvement */
+ transition: transform 0.2s ease; /* subtle UX enhancement */
+}
+
+.button:hover {
+ transform: scale(1.05);
+}
diff --git a/Sprint-3/slideshow/slideshow.js b/Sprint-3/slideshow/slideshow.js
index 063ceefb5..7e86a11a6 100644
--- a/Sprint-3/slideshow/slideshow.js
+++ b/Sprint-3/slideshow/slideshow.js
@@ -1,8 +1,71 @@
-const images = [
+window.images = [
"./assets/cute-cat-a.png",
"./assets/cute-cat-b.jpg",
"./assets/cute-cat-c.jpg",
];
+let currentIndex = 0;
+let intervalId = null;
-// Write your code here
\ No newline at end of file
+// Moves carousel one step (forward or backward)
+function moveFrontOnce(forward) {
+ const images = window.images;
+
+ currentIndex = forward
+ ? (currentIndex + 1) % images.length
+ : (currentIndex - 1 + images.length) % images.length;
+
+ const image = document.getElementById("carousel-img");
+ if (image) image.src = images[currentIndex]; // cleaner + safer
+}
+
+// Starts automatic forward movement
+function startAutoForward() {
+ stopAuto();
+ intervalId = setInterval(() => moveFrontOnce(true), 2000);
+ toggleButtons(true);
+}
+
+// Starts automatic backward movement
+function startAutoBackward() {
+ stopAuto();
+ intervalId = setInterval(() => moveFrontOnce(false), 2000);
+ toggleButtons(true);
+}
+
+// Stops any active autoplay
+function stopAuto() {
+ if (intervalId) {
+ clearInterval(intervalId);
+ intervalId = null;
+ }
+ toggleButtons(false);
+}
+
+// Enables/disables control buttons
+function toggleButtons(isRunning) {
+ document.getElementById("auto-forward").disabled = isRunning;
+ document.getElementById("auto-backward").disabled = isRunning;
+ document.getElementById("stop").disabled = !isRunning;
+}
+
+// Register button click handlers
+document.addEventListener("DOMContentLoaded", () => {
+ document.getElementById("forward-btn")
+ .addEventListener("click", () => moveFrontOnce(true));
+
+ document.getElementById("backward-btn")
+ .addEventListener("click", () => moveFrontOnce(false));
+
+ document.getElementById("auto-forward")
+ .addEventListener("click", startAutoForward);
+
+ document.getElementById("auto-backward")
+ .addEventListener("click", startAutoBackward);
+
+ document.getElementById("stop")
+ .addEventListener("click", stopAuto);
+
+ // Stop is disabled initially
+ document.getElementById("stop").disabled = true;
+});
diff --git a/Sprint-3/slideshow/style.css b/Sprint-3/slideshow/style.css
index 63cedf2d2..ac7e3ebee 100644
--- a/Sprint-3/slideshow/style.css
+++ b/Sprint-3/slideshow/style.css
@@ -1 +1,37 @@
/** Write your CSS in here **/
+body {
+ background-color: rgb(242, 106, 106);
+}
+
+#carousel-img {
+ width: 745px;
+ height: 559px;
+ object-fit: cover;
+ display: block;
+ margin: 0 auto;
+ border-radius: 8px; /* minor visual improvement */
+}
+
+#button-container {
+ display: flex;
+ justify-content: center;
+ gap: 12px; /* slightly smoother spacing */
+ margin-top: 20px;
+}
+
+.button {
+ background-color: bisque;
+ font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
+ font-size: 16px; /* fixing invalid font-size line */
+ font-style: oblique;
+ border-radius: 8px;
+ padding: 10px 24px;
+ cursor: pointer;
+ border: none; /* minor improvement */
+ transition: transform 0.2s ease; /* subtle UX enhancement */
+}
+
+.button:hover {
+ transform: scale(1.05);
+}
+