Creating Carousel Structure 3

In this lesson, we will complete the carousel structure by creating the previous/next buttons and indicators.

Copy
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>

<a class="next" onclick="plusSlides(1)">&#10095;</a>

The buttons to navigate the carousel to the previous and next slides are composed of HTML <a> elements.

The button with the prev class moves the carousel to the previous slide, whereas the button with the next class moves the carousel to the next slide.

When a user clicks a button, a JavaScript function assigned to that button is called.

For instance, clicking the button with the prev class calls the plusSlides(-1) function, which moves the carousel from the current slide to the previous slide.

Similarly, clicking the button with the next class calls the plusSlides(1) function, moving the carousel from the current slide to the next slide.

Copy
<div style="text-align: center">
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
</div>

Indicators show the currently displayed slide, and clicking on an indicator allows the user to jump to a specific slide.

For this carousel, we will use dots as indicators.

Each indicator is composed of a <span> element with the dot class.

When clicking an indicator, it calls the currentSlide function, which moves to a specific slide.

So far, we've set up the carousel layout using HTML.

However, as mentioned earlier, HTML alone cannot enable the carousel to navigate between slides. To create a rotating carousel that transitions between slides, we need to utilize JavaScript.

Before implementing the functionality with JavaScript, let's quickly style the carousel using CSS.