diff --git a/week-3/slideshow/index.html b/week-3/slideshow/index.html index 50f2eb1c..d8b2c8a2 100644 --- a/week-3/slideshow/index.html +++ b/week-3/slideshow/index.html @@ -3,12 +3,16 @@ - Title here + Image carousel + cat-pic + + + diff --git a/week-3/slideshow/slideshow.js b/week-3/slideshow/slideshow.js index 063ceefb..cf9abd04 100644 --- a/week-3/slideshow/slideshow.js +++ b/week-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", ]; +let currentPhotoIndex = 1; -// Write your code here \ No newline at end of file +const image = document.getElementById("carousel-img"); + +const backwardBtn = document.getElementById("backward-btn"); +const forwardBtn = document.getElementById("forward-btn"); + +const stopBtn = document.getElementById("stop-btn"); + +const autoBackwardBtn = document.getElementById("auto-backward-btn"); +const autoForwardBtn = document.getElementById("auto-forward-btn"); + +let autoPlayBackward; +let autoPlayForward; + +// Write your code here + +function generatePhoto() { + image.setAttribute("src", images[currentPhotoIndex]); +} + +function nextPhoto() { + ++currentPhotoIndex; + if (currentPhotoIndex === 3) { + currentPhotoIndex = 0; + } + generatePhoto(); +} + +function previousPhoto() { + --currentPhotoIndex; + if (currentPhotoIndex === -1) { + currentPhotoIndex = 2; + } + generatePhoto(); +} + +backwardBtn.addEventListener("click", previousPhoto); +forwardBtn.addEventListener("click", nextPhoto); + +autoBackwardBtn.addEventListener("click", () => { + autoPlayBackward = setInterval(() => { + previousPhoto(); + }, 1000); + clearInterval(autoPlayForward); +}); + +autoForwardBtn.addEventListener("click", () => { + autoPlayForward = setInterval(() => { + nextPhoto(); + }, 1000); + clearInterval(autoPlayBackward); +}); + +stopBtn.addEventListener("click", () => { + clearInterval(autoPlayBackward); + clearInterval(autoPlayForward); +}); + +window.onload = generatePhoto; diff --git a/week-3/slideshow/style.css b/week-3/slideshow/style.css index 63cedf2d..b5fcb121 100644 --- a/week-3/slideshow/style.css +++ b/week-3/slideshow/style.css @@ -1 +1,7 @@ /** Write your CSS in here **/ + +#carousel-img { + width: auto; + height: 400px; + display: block; +}