Controlling Carousel Slides
In this lesson, we will learn how to control carousel slides using JavaScript.
Creating a 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 have been calling so far.
Function Declaration
The showSlides function is designed to display different slides based on the value of the parameter n.
Variable Declaration
let i;
let slides = document.getElementsByClassName('my-slides');
let dots = document.getElementsByClassName('dot');
We have declared three variables to use internally.
i is used in the loop, slides is an array of elements with the class my-slides, which are the slides.
And dots is an array of elements with the class dot, which are the indicators.
Handling Cases When Number of Slides Exceeds Limit
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
After declaring the variables, we used if statements to handle cases where the value of n is greater or smaller than the number of slides.
If n is greater than the number of slides or less than 1, we need to handle this to ensure we are not trying to display a non-existent slide.
If the value of n is greater than the number of slides, we set the value of slideIndex to 1.
This is so that when the next button is clicked on the last slide, the first slide is shown.
If the value of n is less than 1, we set the value of slideIndex to the number of slides.
This is so that when the previous button is clicked on the first slide, the last slide is shown.
This creates a carousel effect where the slides loop around.
Hiding Slides
for (i = 0; i < slides.length; i++) {
slides[i].style.display = 'none';
}
The showSlides function is called whenever the visible slide changes.
Therefore, we need to hide the currently displayed slide.
We used a for loop 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 iteration, the display property of the second slide is set to none, and so on.
By the end of the loop, all slides will be hidden.
Resetting Indicators
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(' active', '');
}
Indicators also need to be reset whenever the slide changes.
Indicators show which slide is currently being displayed.
Therefore, we need to deactivate the previous indicator.
Indicators use the active class to indicate they are active.
So we loop through the dots array and remove the active class from all indicators.
Displaying the Slide
slides[slideIndex - 1].style.display = 'block';
In the slides array, find the slide corresponding to slideIndex and set the display property to block to show the slide.
Since we have hidden all slides, only the slide corresponding to slideIndex will be visible.
Activating the Indicator
dots[slideIndex - 1].className += ' active';
In the dots array, find the indicator 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.