diff --git a/Sprint-3/slideshow/assets/cute-cat-d.png b/Sprint-3/slideshow/assets/cute-cat-d.png new file mode 100644 index 000000000..ebfe9945e Binary files /dev/null and b/Sprint-3/slideshow/assets/cute-cat-d.png differ diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html index 50f2eb1c0..6069bdc23 100644 --- a/Sprint-3/slideshow/index.html +++ b/Sprint-3/slideshow/index.html @@ -3,12 +3,16 @@ - Title here + Image carousel cat-pic + + + + diff --git a/Sprint-3/slideshow/slideshow.js b/Sprint-3/slideshow/slideshow.js index 063ceefb5..aa928678d 100644 --- a/Sprint-3/slideshow/slideshow.js +++ b/Sprint-3/slideshow/slideshow.js @@ -1,8 +1,66 @@ 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", + "./assets/cute-cat-d.png", ]; +//Write your code here +let currentIndex = 0; +let slideshowIntervalId = null; -// Write your code here \ No newline at end of file +const carouselImage = document.querySelector("#carousel-img"); +const forwardButton = document.querySelector("#forward-btn"); +const backwardButton = document.querySelector("#backward-btn"); + +const autoForwardButton = document.querySelector("#auto-forward"); +const autoBackwardButton = document.querySelector("#auto-backward"); +const stopButton = document.querySelector("#stop"); + +function updateImage() { + carouselImage.src = images[currentIndex]; +} + +function moveForward() { + currentIndex = (currentIndex + 1) % images.length; + updateImage(); +} + +function moveBackward() { + currentIndex = (currentIndex - 1 + images.length) % images.length; + updateImage(); +} + +forwardButton.addEventListener("click", moveForward); +backwardButton.addEventListener("click", moveBackward); + +// ---- AUTOMATIC SLIDESHOW ---- + +function startAutoSlideshow(direction) { + stopAutoSlideshow(); // clear any previous interval + + // Disable auto buttons + autoForwardButton.disabled = true; + autoBackwardButton.disabled = true; + + slideshowIntervalId = setInterval(() => { + direction === "forward" ? moveForward() : moveBackward(); + }, 2000); +} + +function stopAutoSlideshow() { + clearInterval(slideshowIntervalId); + slideshowIntervalId = null; + + // Re-enable buttons + autoForwardButton.disabled = false; + autoBackwardButton.disabled = false; +} + +autoForwardButton.addEventListener("click", () => + startAutoSlideshow("forward") +); +autoBackwardButton.addEventListener("click", () => + startAutoSlideshow("backward") +); +stopButton.addEventListener("click", stopAutoSlideshow);