Creating a Carousel Function 3

In this lesson, we will learn how to implement the initial setup and slide navigation features of a carousel using JavaScript.

Copy
function showSlides(n) {
    let i;
    let slides = document.getElementsByClassName('my-slides');
    let dots = document.getElementsByClassName('dot');

    if (n > slides.length) {
        slideIndex = 1;
    }
    if (n < 1) {
        slideIndex = slides.length;
    }
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = 'none';
    }
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(' active', '');
    }
    slides[slideIndex - 1].style.display = 'block';
    dots[slideIndex - 1].className += ' active';
}

The showSlides function is designed to change the visible slide depending on the value of the argument.

Thus, it uses the parameter n.

Copy
let i;
let slides = document.getElementsByClassName('my-slides');
let dots = document.getElementsByClassName('dot');

Three internal variables are declared.

i is used in the loops, slides is an array of elements with the class my-slides, representing the slides.

Meanwhile, dots is an array of elements with the class dot, representing the indicators.

Copy
if (n > slides.length) {
    slideIndex = 1;
}
if (n < 1) {
    slideIndex = slides.length;
}

After declaring the variables, if statements are used to handle cases where the value of n exceeds the total number of slides or is less than 1.

If n exceeds the total number of slides, it attempts to display a non-existent slide, thus handling is necessary.

When n is greater than the total number of slides, slideIndex is set to 1 to loop back to the first slide upon reaching the end.

Conversely, if n is less than 1, slideIndex is set to the total number of slides so that clicking 'previous' on the first slide displays the last slide.

This approach creates a carousel effect allowing slides to loop seamlessly.

Copy
for (i = 0; i < slides.length; i++) {
    slides[i].style.display = 'none';
}

The showSlides function is called when the visible slide changes.

Thus, any currently visible slide must be hidden.

A for loop is used to hide all slides in the slides array.

On the first iteration, the display property of the first slide is set to none, on the second, the second slide is set, and so on.

This continues for all slides, making them hidden.

Copy
for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(' active', '');
}

Indicators need to reset every time the slide changes.

Indicators highlight the currently displayed slide.

Hence, previously active indicators must be deactivated.

Indicators use the active class to show they are active.

Thus, active is removed from each indicator in the dots array through iteration.

This allows indicators to update as slides change.

Copy
slides[slideIndex - 1].style.display = 'block';

Showing the slide is the core of the showSlides function, yet it's straightforward.

In the slides array, set the display property of the slide corresponding to slideIndex to block.

Since all slides are already hidden, only the slide with slideIndex becomes visible.

Copy
dots[slideIndex - 1].className += ' active';

In the dots array, find the indicator matching slideIndex and append the active class to it.