🖥️ PROJECT: Building an Image Carousel
Explore how to build an image carousel by applying HTML structure, CSS styling, and JavaScript functionality. Understand DOM manipulation and event handling to create buttons that cycle through images seamlessly, looping back to the start and end of the image list.
Overview
We’re now going to use several of the concepts of HTML, the DOM with a flavor of CSS to create the image carousel below for the Cold Stone ice cream flavors.
Image attribution: https://www.coldstonecreamery.com/
What we’ll be making
Setup
Let’s start with the HTML. We will need three main elements – an <img> and two <button> elements to click to the next photo or the previous photo. We will place these three elements in a <div> that will serve as a container to style the carousel. The <div> will be assigned the class "imageCarousel".
The HTML
Below is the given skeleton code for the HTML part of our project. Try ...