Today I learned how to create a slide show in plain HTML using CSS and JavaScript. This project displays an image in the background and the same image is shown in an overlay with opacity set to 0 to create a picture upon picture effect.
This project taught me how to use z-index to align items on top of each other. Plus, how to create a forward and backward functionality. I also learned how to check if you are in the last item in a node list by calculating the total length of the nodelist and subtracting it with -1.
rightBtn.addEventListener('click', () => {
activeSlide++;
if(activeSlide > slides.length -1){
activeSlide = 0;
}
| Category | HTML / JS / CSS |
| Original source | 50 Projects in 50 Days |
| Date | January 22nd, 2025 |
| Codepen | Click here |