From 9bf0a6a641e635a9d768a47fb1acc21a5a1b8f66 Mon Sep 17 00:00:00 2001 From: Sara Tahir Date: Tue, 22 Jul 2025 12:25:06 +0100 Subject: [PATCH 1/6] Updated HTML title and added a link to the style sheet --- Sprint-3/slideshow/index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html index 50f2eb1c0..089031f04 100644 --- a/Sprint-3/slideshow/index.html +++ b/Sprint-3/slideshow/index.html @@ -3,7 +3,8 @@ - Title here + "Image carousel" + From 9b3910df178011846558b45372433622753a6418 Mon Sep 17 00:00:00 2001 From: Sara Tahir Date: Tue, 22 Jul 2025 12:25:37 +0100 Subject: [PATCH 2/6] Added functionality for forward and backward button --- Sprint-3/slideshow/slideshow.js | 35 ++++++++++++++++++++++++++++----- 1 file changed, 30 insertions(+), 5 deletions(-) diff --git a/Sprint-3/slideshow/slideshow.js b/Sprint-3/slideshow/slideshow.js index 063ceefb5..5cc281774 100644 --- a/Sprint-3/slideshow/slideshow.js +++ b/Sprint-3/slideshow/slideshow.js @@ -1,8 +1,33 @@ 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", + "https://images.unsplash.com/photo-1518717758536-85ae29035b6d?auto=format&fit=crop&w=800&q=80", +] -// Write your code here \ No newline at end of file +let currentIndex = 0; +const carouselImg = document.getElementById("carousel-img"); + +function showNextImage() { + currentIndex++; + if (currentIndex >= images.length) { + currentIndex = 0; // wrap to start + } + carouselImg.src = images[currentIndex]; +} + document.getElementById("forward-btn").addEventListener("click",function(){ + showNextImage() + + }) + function showPreviousImage() { + currentIndex--; + if (currentIndex < 0) { + currentIndex = images.length - 1; // assign the last index to currentIndex + } + carouselImg.src = images[currentIndex]; +} + document.getElementById("backward-btn").addEventListener("click",function(){ + showPreviousImage() + + }) \ No newline at end of file From e751dc3e78f172f915328a0fd464d180de9e73b2 Mon Sep 17 00:00:00 2001 From: Sara Tahir Date: Tue, 22 Jul 2025 12:26:07 +0100 Subject: [PATCH 3/6] Added some styling to ensure all images are uniform in size --- Sprint-3/slideshow/style.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/Sprint-3/slideshow/style.css b/Sprint-3/slideshow/style.css index 63cedf2d2..946d23035 100644 --- a/Sprint-3/slideshow/style.css +++ b/Sprint-3/slideshow/style.css @@ -1 +1,9 @@ /** Write your CSS in here **/ +#carousel-img { + max-width: 100%; + height: auto; + display: block; + margin: 0 auto; + max-height: 400px; /* or any height that fits your design */ + object-fit: contain; +} From 1b6b0c91801d3d6e37af450cfad84096d1bbd5a5 Mon Sep 17 00:00:00 2001 From: Sara Tahir Date: Tue, 22 Jul 2025 22:16:23 +0100 Subject: [PATCH 4/6] Added Buttons for Autoforward, AutoBackwards and stop --- Sprint-3/slideshow/index.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html index 089031f04..aea83c2ab 100644 --- a/Sprint-3/slideshow/index.html +++ b/Sprint-3/slideshow/index.html @@ -11,5 +11,8 @@ cat-pic + + + From 1e990f5f5edff09dc9150f928b9a6268109917dc Mon Sep 17 00:00:00 2001 From: Sara Tahir Date: Tue, 22 Jul 2025 22:17:16 +0100 Subject: [PATCH 5/6] Added functions for Autoforward,AutoBackward and Stop --- Sprint-3/slideshow/slideshow.js | 26 +++++++++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/Sprint-3/slideshow/slideshow.js b/Sprint-3/slideshow/slideshow.js index 5cc281774..8fff42dff 100644 --- a/Sprint-3/slideshow/slideshow.js +++ b/Sprint-3/slideshow/slideshow.js @@ -30,4 +30,28 @@ function showNextImage() { document.getElementById("backward-btn").addEventListener("click",function(){ showPreviousImage() - }) \ No newline at end of file + }) + let autoForwardIntervalId; + let autoBackwardIntervalId // declared once globally or at the top of your JS file + +function startAutoForward() { + clearInterval(autoForwardIntervalId); + autoForwardIntervalId = setInterval(showNextImage, 2000); +} +document.getElementById("auto-forward-btn").addEventListener("click", function() { + startAutoForward(); +}); +function setAutoBackwards(){ + clearInterval(autoBackwardIntervalId); + autoBackwardIntervalId = setInterval(showPreviousImage,2000); +} +document.getElementById("auto-backward-btn").addEventListener("click", function() { + setAutoBackwards(); +}); +function stopSlideshow() { + clearInterval(autoForwardIntervalId); + clearInterval(autoBackwardIntervalId); +} +document.getElementById("stop-btn").addEventListener("click", function() { + stopSlideshow(); +}); \ No newline at end of file From d292efc62cea62ee3db55575c9f1f8a379197e3b Mon Sep 17 00:00:00 2001 From: Sara Tahir Date: Tue, 22 Jul 2025 22:23:39 +0100 Subject: [PATCH 6/6] Added a title and updated the style sheet. --- Sprint-3/slideshow/index.html | 1 + Sprint-3/slideshow/style.css | 67 ++++++++++++++++++++++++++++++++--- 2 files changed, 63 insertions(+), 5 deletions(-) diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html index aea83c2ab..8961e2624 100644 --- a/Sprint-3/slideshow/index.html +++ b/Sprint-3/slideshow/index.html @@ -8,6 +8,7 @@ +

Image carousel

cat-pic diff --git a/Sprint-3/slideshow/style.css b/Sprint-3/slideshow/style.css index 946d23035..e8909c34c 100644 --- a/Sprint-3/slideshow/style.css +++ b/Sprint-3/slideshow/style.css @@ -1,9 +1,66 @@ /** Write your CSS in here **/ +/* Center everything and add some spacing */ +body { + font-family: Arial, sans-serif; + background-color: #f0f4f8; + display: flex; + flex-direction: column; + align-items: center; + padding: 30px 20px; +} + +/* Style the carousel image */ #carousel-img { - max-width: 100%; - height: auto; - display: block; - margin: 0 auto; - max-height: 400px; /* or any height that fits your design */ + width: 350px; + height: 230px; object-fit: contain; + border: 4px solid #4a90e2; + border-radius: 12px; + box-shadow: 0 4px 10px rgba(0,0,0,0.15); + margin-bottom: 25px; + background-color: white; +} + +/* Style all buttons uniformly */ +h1 { + font-size: 2rem; + color: #333; + margin-bottom: 20px; + text-align: center; + font-family: 'Arial', sans-serif; +} +button { + background-color: #a9457c; + color: white; + border: none; + padding: 12px 20px; + margin: 5px 8px; + font-size: 16px; + border-radius: 6px; + cursor: pointer; + transition: background-color 0.3s ease; + box-shadow: 0 3px 6px rgba(74,144,226,0.5); +} + +/* Hover effect on buttons */ +button:hover { + background-color: #357ABD; +} + +/* Optional: Add focus outline for accessibility */ +button:focus { + outline: 2px solid #357ABD; + outline-offset: 2px; +} + +/* Responsive tweak: smaller on narrow screens */ +@media (max-width: 400px) { + #carousel-img { + width: 90vw; + height: auto; + } + button { + width: 100%; + margin: 8px 0; + } }