Skip to main content
Practice

Creating Carousel Structure 3

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


Creating Previous / Next Buttons​

Previous/Next Buttons HTML
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>

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

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

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

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

For example, if the button with the prev class is clicked, the plusSlides(-1) function is called, moving the carousel from the current slide to the previous slide.

Similarly, if the button with the next class is clicked, the plusSlides(1) function is called, moving the carousel from the current slide to the next slide.


Indicators​

Indicator Buttons HTML
<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 which slide is currently displayed, and clicking an indicator allows you to move to a specific slide.

For this carousel, we will use dots as indicators.

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

When an indicator is clicked, the currentSlide function is called, moving to a specific slide.


So far, we have used HTML to compose the layout of the carousel.

As mentioned before, HTML alone is not enough to navigate the carousel to previous and next slides. To create a carousel that transitions through slides, we need to use JavaScript.

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

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.