From c354a2523e5414576ac7db9a2d9c2c0e09d04d52 Mon Sep 17 00:00:00 2001 From: Nik Bezdzenariy Date: Mon, 27 Apr 2026 13:14:11 +0200 Subject: [PATCH] feat: implement slideshow carousel with auto-play Add forward/backward navigation buttons and auto-play feature using setInterval (2s). Manual buttons disabled during auto-play. --- Sprint-3/slideshow/index.html | 57 +++++++++++++++++++--- Sprint-3/slideshow/slideshow.js | 86 ++++++++++++++++++++++++++++++++- 2 files changed, 136 insertions(+), 7 deletions(-) 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 @@ - Title here - + Image carousel + - - cat-pic - - + +

Image Carousel

+ + Carousel image + +
+ + +
+ +
+ + + +
+ + + 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