Creating a Carousel Feature 2

In this session, we'll create a currentSlide function using JavaScript to enable transitioning to a specific slide.

Copy
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>

We have created slide indicators in addition to the previous/next buttons.

When you click on these dot indicators, the carousel should transition to a specific slide.

Clicking the first dot will take you to Slide 1, the second dot will take you to Slide 2, and the third dot will take you to Slide 3.

Copy
function currentSlide(n) {
    showSlides(slideIndex = n);
}

The currentSlide function is implemented similarly to the previously created plusSlides function by calling the showSlides function.

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

Therefore, if the value of n is 1, slideIndex will be 1, if it is 2, slideIndex will be 2, and if it is 3, slideIndex will be 3.

So, if slideIndex is originally 1, showing the first slide, calling currentSlide(3) will change slideIndex to 3, displaying the third slide.