From b9a3663475702a145a4d709a3e3ef0301018e001 Mon Sep 17 00:00:00 2001 From: iTeddy16 Date: Thu, 31 Jul 2025 17:34:12 +0100 Subject: [PATCH 1/2] add a title, css and js to the image carousel to implement navigation functionality for manual Backward and forward --- Sprint-3/slideshow/index.html | 12 ++++++--- Sprint-3/slideshow/slideshow.js | 30 ++++++++++++++++++++- Sprint-3/slideshow/style.css | 46 ++++++++++++++++++++++++++++++++- 3 files changed, 82 insertions(+), 6 deletions(-) diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html index 50f2eb1c0..e9e106694 100644 --- a/Sprint-3/slideshow/index.html +++ b/Sprint-3/slideshow/index.html @@ -3,12 +3,16 @@ - Title here + Image carousel + - cat-pic - - +
+

Image Carousel Demo

+ Image carousel +
+ + diff --git a/Sprint-3/slideshow/slideshow.js b/Sprint-3/slideshow/slideshow.js index 063ceefb5..8fb771fb1 100644 --- a/Sprint-3/slideshow/slideshow.js +++ b/Sprint-3/slideshow/slideshow.js @@ -3,6 +3,34 @@ const images = [ "./assets/cute-cat-b.jpg", "./assets/cute-cat-c.jpg", ]; +// Write your code here +let currentIndex = 0; +let intervalId = null; -// Write your code here \ No newline at end of file +const imageElement = document.getElementById("carousel-image"); + +function updateImage() { + imageElement.src = images[currentIndex]; +} + +function nextImage() { + currentIndex = (currentIndex + 1) % images.length; + updateImage(); +} + +function previousImage() { + currentIndex = (currentIndex - 1 + images.length) % images.length; // Go to previous, wrap to end + updateImage(); +} + +//forwardBtn.addEventListener("click", nextImage); +document.getElementById("forward").addEventListener("click", function () { + nextImage(); +}); + +document.getElementById("back").addEventListener("click", function () { + previousImage(); +}); + +updateImage(); diff --git a/Sprint-3/slideshow/style.css b/Sprint-3/slideshow/style.css index 63cedf2d2..6f7ee0f33 100644 --- a/Sprint-3/slideshow/style.css +++ b/Sprint-3/slideshow/style.css @@ -1 +1,45 @@ -/** Write your CSS in here **/ +/** Writ/* Reset default styles */ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + background-color: #f4f4f4; + text-align: center; + padding: 2rem; +} + +#carousel-image { + max-width: 50%; + max-height: 50%; + border-radius: 10px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); + margin-bottom: 1.5rem; + margin-top: 2rem; + transition: opacity 0.3s ease-in-out; +} + +button { + background-color: #007acc; + color: white; + border: none; + padding: 0.6rem 1.2rem; + margin: 0 0.5rem; + font-size: 1rem; + border-radius: 4px; + cursor: pointer; + transition: background-color 0.3s ease; +} + + +button:hover { + background-color: #005fa3; +} + +button:active { + transform: scale(0.97); +} + From 40de9deb2e6311d27e1cbe73d5a0027f2f2a3b89 Mon Sep 17 00:00:00 2001 From: iTeddy16 Date: Thu, 31 Jul 2025 18:24:48 +0100 Subject: [PATCH 2/2] Add more control buttons Auto forward,backward and stop and display current image number. --- Sprint-3/slideshow/index.html | 5 +++++ Sprint-3/slideshow/slideshow.js | 39 +++++++++++++++++++++++++++++---- Sprint-3/slideshow/style.css | 9 ++++++-- 3 files changed, 47 insertions(+), 6 deletions(-) diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html index e9e106694..3df7f2fa8 100644 --- a/Sprint-3/slideshow/index.html +++ b/Sprint-3/slideshow/index.html @@ -10,9 +10,14 @@

Image Carousel Demo

+ Image carousel
+

+ + + diff --git a/Sprint-3/slideshow/slideshow.js b/Sprint-3/slideshow/slideshow.js index 8fb771fb1..8be4b14e3 100644 --- a/Sprint-3/slideshow/slideshow.js +++ b/Sprint-3/slideshow/slideshow.js @@ -8,10 +8,12 @@ const images = [ let currentIndex = 0; let intervalId = null; +const indexDisplay = document.getElementById("image-index"); const imageElement = document.getElementById("carousel-image"); function updateImage() { imageElement.src = images[currentIndex]; + indexDisplay.textContent = `${currentIndex + 1} `; } function nextImage() { @@ -20,17 +22,46 @@ function nextImage() { } function previousImage() { - currentIndex = (currentIndex - 1 + images.length) % images.length; // Go to previous, wrap to end + currentIndex = (currentIndex - 1 + images.length) % images.length; updateImage(); } -//forwardBtn.addEventListener("click", nextImage); -document.getElementById("forward").addEventListener("click", function () { - nextImage(); +function AutoPlay(direction) { + stopAutoPlay(); + + intervalId = setInterval(function () { + if (direction === "forward") { + nextImage(); + } else { + previousImage(); + } + }, 1000); // Every 1 seconds +} + +function stopAutoPlay() { + clearInterval(intervalId); + + currentIndex = 0; // Reset index + updateImage(); +} + +document.getElementById("auto-back").addEventListener("click", function () { + AutoPlay("back"); }); document.getElementById("back").addEventListener("click", function () { previousImage(); }); +document.getElementById("forward").addEventListener("click", function () { + nextImage(); +}); + +document.getElementById("auto-forward").addEventListener("click", function () { + AutoPlay("forward"); +}); + +document.getElementById("stop").addEventListener("click", stopAutoPlay); + + updateImage(); diff --git a/Sprint-3/slideshow/style.css b/Sprint-3/slideshow/style.css index 6f7ee0f33..a9eb7e43e 100644 --- a/Sprint-3/slideshow/style.css +++ b/Sprint-3/slideshow/style.css @@ -17,7 +17,7 @@ body { max-height: 50%; border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); - margin-bottom: 1.5rem; + margin-bottom: 1.rem; margin-top: 2rem; transition: opacity 0.3s ease-in-out; } @@ -27,13 +27,18 @@ button { color: white; border: none; padding: 0.6rem 1.2rem; - margin: 0 0.5rem; font-size: 1rem; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease; } +.image-index { + font-size: 1.2rem; + margin-left: 1rem; + text-align: left; + color: #333; +} button:hover { background-color: #005fa3;