...

/

Building an Image Carousel

Building an Image Carousel

Get an understanding of how you can use your knowledge towards functional applications.

We’re now going to use several of the concepts we’ve learned in the lessons covering JavaScript and the DOM to create the image carousel below.

Creating image carousel using HTML, CSS and JavaScript

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.

Creating HTML for image carousel

Let’s also add some CSS to style and position the <img> and <button> elements:

Creating CSS for image carousel

As ...