Building an Image Carousel
Explore how to build an image carousel by combining HTML structure, CSS styling, and JavaScript programming. Learn to manipulate the DOM, handle events, and update image sources dynamically to cycle through photos effectively.
We'll cover the following...
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.
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.
Let’s also add some CSS to style and position the <img> and <button> elements:
As you may notice, the buttons don’t currently do anything. In order to build a properly functioning image carousel, we must tie Javascript code to user input.
For instance, when a user clicks the next or previous button, it should show the next or previous photo in a list of photos. In this example, we will store this list of photos as an array of image URLs:
We should also create a variable that stores the index position the image carousel is at in the array of URLs. The <img> tag’s src URL matches the first index position of the array, so the variable declaration should look something like this:
Adding functionality to button elements
When you click on the <button> with the id value next-button, it should change the src attribute of the <img> element to the next URL in the images array.
Test your understanding
Given the following variable declarations:
var images = [
"/udata/DErqVR5q0Pv/longexposurewaterfall1.jpg",
"/udata/MLE2D8Lzv6X/route66.jpg",
"/udata/nPaBd6Mq1Ly/archesdrive.jpg",
"/udata/1krmXeav6GB/army2.jpg",
"/udata/1klaZD0vxjz/redwoodupwards2.jpg",
"/udata/4WQvGrR56Qq/solduc2.jpg",
"/udata/1koZJB2vq8k/truck4scale.jpg"
];
var currentIndex = 0;
How could you implement the functionality described above?
Add an event listener to the <button> that increments currentIndex every time it is clicked.
Add an event listener to the <button> that decrements currentIndex every time it is clicked.
Add an event listener to the <button> that both increments currentIndex and sets the <img> element’s src attribute to images[currentIndex]
Add an event listener to the <button> that both decrements currentIndex and sets the <img> element’s src attribute to images[currentIndex]
If you answered the question correctly, you’ll know that we have to increment the index on a button click.
However, what happens when we reach the end of the array? Ideally, the image carousel will cycle through the photos and go back to the beginning if we reach the end of the list.
Exercise
Implement a function named incrementIndex that updates the index position, and goes back to the beginning of the array if the index reaches the end of the array, as shown in the diagram below.
Exercise
Now that you’ve implemented a way to increment/cycle the array index, create an event listener for the next button that calls incrementIndex() and updates the <img> element’s src attribute.
Hopefully, you can see your knowledge with JavaScript and DOM manipulation starting to pay off! Now, let’s go ahead and finish up implementing the image carousel.
Exercise
First, create a function named decrementIndex, which updates currentIndex by decrementing it and cycles to the last array index position if it goes past the first index position, as shown in this diagram.
After implementing decrementIndex, create an event listener for the previous <button> element that cycles through the images through the use of the decrementIndex function.
Congratulations!
If you passed all the tests, you should have a fully functioning image carousel. Hopefully, this gives you a taste for all the things that are possible working with just HTML, CSS, and JavaScript.