본문으로 건너뛰기

Controlling Carousel Slides

In this lesson, we'll explore how to control carousel slides using JavaScript.


Creating a Function to Display Slides

Declaring the showSlides Function to Display Slides
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';
}

Now, let's create the showSlides function that we've only been calling so far.


Function Declaration

The showSlides function changes the displayed slide based on the value of its argument n.


Variable Declaration

Declaring Variables for Slide Control
let i;
let slides = document.getElementsByClassName('my-slides');
let dots = document.getElementsByClassName('dot');

I declared three variables for internal use.

i is a variable to be used in a loop, and slides is an array of elements with the class my-slides, collecting the slides.

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


Handling Excess Slide Numbers

Handling Excess Slide Numbers
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}

After declaring the variables, I used an if statement to handle cases where the value of n is greater or smaller than the number of slides.

If the value of n is greater or smaller than the number of slides, it would try to display a non-existent slide, so it's necessary to handle this situation.

First, if the value of n is greater than the number of slides, I set the value of slideIndex to 1.

This is to ensure that when the next button is pressed on the last slide, the first slide is displayed.

And if the value of n is less than 1, I set the value of slideIndex to the number of slides.

This is to ensure that when the previous button is pressed on the first slide, the last slide is displayed.

By doing this, a carousel-like effect where the slides rotate in a cycle can be implemented.


Hide Slides

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

The showSlides function is called when the visible slide changes.

Therefore, it's necessary to hide the slide that is currently being shown.

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

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

By doing this until the last slide, all slides will be hidden.


Initialize Indicators

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

Indicators also need to be reset each time the slide changes.

Indicators serve to display which slide is currently visible.

Therefore, it is necessary to deactivate the indicator that was previously active.

Indicators use the active class to signify their active status.

Thus, I traversed through all the indicators in the dots array and removed the active class.


Show Slides

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

When you find the slide corresponding to slideIndex in the slides array and set its display property to block, the slide will appear on the screen.

Since all slides have already been hidden, only the slide corresponding to slideIndex will be visible.


Activate Indicators

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

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