diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html index 50f2eb1c0..016f17a41 100644 --- a/Sprint-3/slideshow/index.html +++ b/Sprint-3/slideshow/index.html @@ -1,14 +1,26 @@ - + - Title here + + Image carousel - cat-pic - - +

Giraffe Gallery

+
+ + Giraffe + + + +
+ + + +
+ +
diff --git a/Sprint-3/slideshow/slideshow.js b/Sprint-3/slideshow/slideshow.js index 063ceefb5..aad0bc757 100644 --- a/Sprint-3/slideshow/slideshow.js +++ b/Sprint-3/slideshow/slideshow.js @@ -1,8 +1,54 @@ const images = [ - "./assets/cute-cat-a.png", - "./assets/cute-cat-b.jpg", - "./assets/cute-cat-c.jpg", + "https://images.unsplash.com/photo-1612358405970-e1aeba9d76c2", + "https://plus.unsplash.com/premium_photo-1664304444016-44b5d41a01eb", + "https://plus.unsplash.com/premium_photo-1661809060766-f96a928a00a5", + "https://plus.unsplash.com/premium_photo-1664302716901-63777e888686", ]; +let currentIndex = 0; -// Write your code here \ No newline at end of file +const slide = document.getElementById("slide"); +const backButton = document.getElementById("back"); +const forwardButton = document.getElementById("forward"); + +function updateSlide() { + slide.src = images[currentIndex]; +} + +backButton.addEventListener("click", () => { + currentIndex = (currentIndex - 1 + images.length) % images.length; + updateSlide(); +}); + +forwardButton.addEventListener("click", () => { + currentIndex = (currentIndex + 1) % images.length; + // makes a loop so that the last pic leads to the first pic and vv + updateSlide(); +}); + +// show first image on load +updateSlide(); + +let autoId; + +function startAuto(direction) { + stopAuto(); // clear any existing interval first + autoId = setInterval(() => { + currentIndex = (currentIndex + direction + images.length) % images.length; + updateSlide(); + }, 5000); +} + +function stopAuto() { + clearInterval(autoId); +} + +document.getElementById("auto-forward").addEventListener("click", () => { + startAuto(1); +}); + +document.getElementById("auto-back").addEventListener("click", () => { + startAuto(-1); +}); + +document.getElementById("stop").addEventListener("click", stopAuto); diff --git a/Sprint-3/slideshow/style.css b/Sprint-3/slideshow/style.css index 63cedf2d2..780ca7332 100644 --- a/Sprint-3/slideshow/style.css +++ b/Sprint-3/slideshow/style.css @@ -1 +1,37 @@ -/** Write your CSS in here **/ +body { + font-family: Arial, sans-serif; + text-align: center; +} + +#slideshow { + display: flex; + align-items: center; + justify-content: center; + gap: 20px; + margin-top: 30px; +} + +#slide { + width: 450px; + height: 300px; + object-fit: cover; + border-radius: 10px; +} + +button { + padding: 10px 20px; + font-size: 1rem; + cursor: pointer; +} + +/* for smartphone access */ +@media (max-width: 600px) { + #slide { + width: 90vw; + height: 60vw; + } + + button { + padding: 12px 18px; + } +}