Skip to main content
Practice

Creating Carousel Function 3

In this lesson, we will learn how to implement the initial settings and slide transition functionality for a carousel using JavaScript.


Creating the showSlides Function​

Declare the showSlides function
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';
}

Function Declaration​

The showSlides function is designed to change the displayed slide based on the value of the argument.

Thus, it takes n as an argument.


Variable Declarations​

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

Three variables are declared for internal use.

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

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


Handling Overflow of Slides​

Handling overflow of slides
if (n > slides.length) {
    slideIndex = 1;
}
if (n < 1) {
    slideIndex = slides.length;
}

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

If n exceeds the total number of slides, we need to prevent trying to display a non-existent slide.

First, if n is greater than the total number of slides, we set slideIndex to 1. This ensures that pressing the next button on the last slide brings up the first slide.

And if n is less than 1, we set slideIndex to the total number of slides. This ensures that pressing the previous button on the first slide brings up the last slide.

This approach allows the slides to loop like a carousel.


Hiding Slides​

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

The showSlides function needs to hide the currently displayed slides.

To hide all slides in the slides array, use a for loop.

During each iteration, the display property of the CSS of each slide is set to none.

This process continues until all slides are hidden.


Resetting Slide Indicators​

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

The slide indicators also need to be reset whenever the slide changes.

Slide indicators show which slide is currently displayed.

Thus, the previously activated slide indicator must be deactivated.

Slide indicators use the active class to indicate activation.

So, during each iteration of the dots array, the active class is removed from each slide indicator.

This allows the corresponding slide indicator to change when switching slides.


Showing the Slide​

Showing the slide
slides[slideIndex - 1].style.display = 'block';

The core of the showSlides function is simple.

Find the slide in the slides array corresponding to slideIndex and set its display property to block.

Since all slides were hidden earlier, only the slide corresponding to slideIndex will be shown.


Activating the Slide Indicator​

Activating the slide indicator
dots[slideIndex - 1].className += ' active';

Find the slide indicator in the dots array corresponding to slideIndex and add the active class to it.

Want to learn more?

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