Skip to main content
Practice

Creating a Carousel Feature 2

In this lesson, we'll create the currentSlide function in JavaScript to navigate to a specific slide.


Creating the Navigate to Specific Slide Feature​

Creating Position Indicators
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>

Besides the previous/next buttons, we have also created position indicators.

When these position indicators, represented by dots, are clicked, they should allow navigation to a specific slide.

Clicking the first dot should navigate to the 1st slide, clicking the second dot to the 2nd slide, and the third dot to the 3rd slide.

Declaring the currentSlide Function
function currentSlide(n) {
    showSlides(slideIndex = n);
}

The currentSlide function is implemented similar to the plusSlides function we created earlier, by calling the showSlides function.

However, when calling the showSlides function, we set slideIndex to the value of n.

Therefore, if n is 1, slideIndex is set to 1; if n is 2, slideIndex is set to 2; and if n is 3, slideIndex is set to 3.

So, when slideIndex is 1 and showing the 1st slide, calling the currentSlide(3) function will set slideIndex to 3, and the 3rd slide will be displayed.

Want to learn more?

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