Learn all about the Bootstrap Carousel feature with plenty of practical examples to help you understand the concept clearly:
In this tutorial on Bootstrap 4 carousels, we have covered an introduction to Bootstrap 4 carousels, a carousel with slides only, with controls, with indicators, with captions, fade transition between slides, data interval between slides, activating carousels using JavaScript and FAQs about Bootstrap 4 carousels.
Please note that we have used Bootstrap version 4 in all examples.
=> Take A Look At The Bootstrap Beginners Guide Here
Introduction To Bootstrap 4 Carousels
In simple terms, a carousel is a slide show of images. The images may be in the form of slides of text too.
You can activate carousels by either using JavaScript code or without using JavaScript code. If you are not using JavaScript code for activating carousels, then you can use data attributes to activate carousels. In this tutorial, we have used both data attributes and JavaScript code to create/activate Bootstrap carousels.
The below table summarizes the classes and attributes of Bootstrap 4 carousels that we have used in this tutorial.
| Class | Usage |
|---|---|
| The .carousel class | This class is used to create a carousel. |
| The .slide class | This class is used to add an animation when moving from one slide to another. |
| The .carousel-inner class | This class is used to add slides to the carousel. |
| The .carousel-item class | This class is used to specify the slide content. |
| The .active class | This class is used to indicate the currently active slide when loading the application. |
| The .carousel-indicators class | This class is used to add indicators to the carousel. |
| The .carousel-control-prev class | This class is used to create the previous button. |
| The .carousel-control-next class | This class is used to create the next button. |
| The .carousel-control-prev-icon class | This class is used to create the previous button. |
| The .carousel-control-next-icon class | This class is used to create the next button. |
| The .carousel-caption class | This class is used to add a caption to the slide. |
| The .carousel-fade class | This class is used to add a fade transition, instead of a slide, when moving from one slide to another. |
| Attribute | Usage |
| The data-ride="carousel" attribute | This attribute is used to activate the carousel. |
| The data-slide attribute | This attribute is used to specify to which slide to move. It accepts the prev value and the next value. |
| The data-slide-to attribute | This attribute is used to specify to which slide to move. It accepts numbers. |
| The data-interval attribute | This attribute is used to specify the amount of time to delay between two adjacent slides. |
Usually, a Bootstrap carousel consists of several components such as,
- Slides
- Controls
- Indicators
- Captions
Carousel With Slides Only
Usually, a carousel consists of two or more slides. The .carousel-inner class and the .carousel-item class are used to create the carousel items or the slides.
You need to add the .active class for one of the slides to indicate the currently active slide of the carousel while loading the application.
Note: If you don’t use the .active class, then the carousel will not be visible.
Please refer to the section “Carousel Examples” for an example of a carousel with slides only.
Carousel With Controls
You can add previous and next controls to the carousel. Add the .carousel-control-prev class, the .carousel-control-next class, the .carousel-control-prev-icon class and the .carousel-control-next-icon class to add controls to the carousel.
Adding controls are optional, but it helps the user to easily navigate between the slides by clicking the previous or next controls. Please refer to the section “Carousel Examples” for an example of a carousel with controls.
Carousel With Indicators
Add the .carousel-indicators class to add indicators to the carousel. Similar to controls, adding indicators to the carousel is also optional. It provides easy navigation between slides by clicking on the relevant indicator.
Please refer to the section “Carousel Examples” for an example of a carousel with indicators (and controls).
Bootstrap Carousel Examples
The below programming code shows examples of:
- Carousel with slides only,
- Carousel with controls and
- Carousel with indicators.
Important points to remember:
- You need to add unique ids to the carousels if you are using multiple carousels on the same page.
- The controllers and indicators should have the data-target attribute (or the href attribute for links) that matches the id of the carousel elements.
- The data-slide attribute is used to specify which slide to move and it accepts the prev value and the next value.
- The data-slide-to attribute is used to specify which slide to move and it accepts numbers.
You can try this example by running the below programming code.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <h3>A carousel with slides only</h3> <div id="mySlideshow1" class="carousel slide mb-3" data-ride="carousel"> <!-- Slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="slide1.png" alt="Slide 1" height="500"> </div> <div class="carousel-item"> <img class="d-block w-100" src="slide2.png" alt="Slide 2" height="500"> </div> <div class="carousel-item"> <img class="d-block w-100" src="slide3.png" alt="Slide 3" height="500"> </div> </div> </div> <h3>A carousel with controls</h3> <div id="mySlideshow2" class="carousel slide mb-3" data-ride="carousel"> <!-- Slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="slide1.png" alt="Slide 1" height="500"> </div> <div class="carousel-item"> <img class="d-block w-100" src="slide2.png" alt="Slide 2" height="500"> </div> <div class="carousel-item"> <img class="d-block w-100" src="slide3.png" alt="Slide 3" height="500"> </div> </div> <!-- Left and right controls --> <a class="carousel-control-prev" href="#mySlideshow2" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#mySlideshow2" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> <h3>A carousel with indicators</h3> <div id="mySlideshow3" class="carousel slide mb-3" data-ride="carousel"> <!-- Indicators --> <ul class="carousel-indicators"> <li data-target="#mySlideshow3" data-slide-to="0" class="active"></li> <li data-target="#mySlideshow3" data-slide-to="1"></li> <li data-target="#mySlideshow3" data-slide-to="2"></li> </ul> <!-- Slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="slide1.png" alt="Slide 1" height="500"> </div> <div class="carousel-item"> <img class="d-block w-100" src="slide2.png" alt="Slide 2" height="500"> </div> <div class="carousel-item"> <img class="d-block w-100" src="slide3.png" alt="Slide 3" height="500"> </div> </div> <!-- Left and right controls --> <a class="carousel-control-prev" href="#mySlideshow3" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#mySlideshow3" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
Note: Images or slides of the text that are used to create carousel slides need to be put in your project folder.
The below screenshot shows the browser output of the above programming code.
Carousel With Captions
You can add captions such as headings or descriptions to the carousel. Wrap caption elements such as <h1>, <p>, etc. in a <div> element with the .carousel-caption class to create a carousel with a caption. It helps the user for a better understanding of the content of the slides.
Example of Carousel with a caption:
The below programming code shows an example of a carousel with a caption.
<html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <div id="mySlideshow" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ul class="carousel-indicators"> <li data-target="#mySlideshow" data-slide-to="0" class="active"></li> <li data-target="#mySlideshow" data-slide-to="1"></li> <li data-target="#mySlideshow" data-slide-to="2"></li> </ul> <!-- Slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="slide1.png" alt="Slide 1" height="500"> <div class="carousel-caption"> <h1>First Slide</h1> <p>This is the first slide.</p> </div> </div> <div class="carousel-item"> <img class="d-block w-100" src="slide2.png" alt="Slide 2" height="500"> <div class="carousel-caption"> <h1>Second Slide</h1> <p>This is the second slide.</p> </div> </div> <div class="carousel-item"> <img class="d-block w-100" src="slide3.png" alt="Slide 3" height="500"> <div class="carousel-caption"> <h1>Third Slide</h1> <p>This is the third slide.</p> </div> </div> </div> <!-- Left and right controls --> <a class="carousel-control-prev" href="#mySlideshow" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#mySlideshow" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
The below screenshot shows the browser output of the above programming code.
Fade Transition Between Slides
Add the .carousel-fade class to add a fade transition, instead of a slide, while moving from one slide to another.
The below programming code shows an example of a carousel with a fade transition.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <div id="mySlideshow" class="carousel slide carousel-fade mb-3" data-ride="carousel"> <!-- Indicators --> <ul class="carousel-indicators"> <li data-target="#mySlideshow" data-slide-to="0" class="active"></li> <li data-target="#mySlideshow" data-slide-to="1"></li> <li data-target="#mySlideshow" data-slide-to="2"></li> </ul> <!-- Slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="slide1.png" alt="Slide 1" height="500"> </div> <div class="carousel-item"> <img class="d-block w-100" src="slide2.png" alt="Slide 2" height="500"> </div> <div class="carousel-item"> <img class="d-block w-100" src="slide3.png" alt="Slide 3" height="500"> </div> </div> <!-- Left and right controls --> <a class="carousel-control-prev" href="#mySlideshow" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#mySlideshow" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
The below screenshots show the browser output of the above programming code.
Tip: Carefully identify the fade transition while moving from one slide to another.
Data Interval Between Slides
Add the data-interval attribute to a carousel item (slide) to specify the amount of time (in milliseconds) to delay between two adjacent slides.
The below programming code shows an example of a carousel with the data interval attribute.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <div id="mySlideshow" class="carousel slide mb-3" data-ride="carousel"> <!-- Indicators --> <ul class="carousel-indicators"> <li data-target="#mySlideshow" data-slide-to="0" class="active"></li> <li data-target="#mySlideshow" data-slide-to="1"></li> <li data-target="#mySlideshow" data-slide-to="2"></li> </ul> <!-- Slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="slide1.png" alt="Slide 1" height="500"> </div> <div class="carousel-item" data-interval="1000"> <img class="d-block w-100" src="slide2.png" alt="Slide 2" height="500"> </div> <div class="carousel-item" data-interval="2000"> <img class="d-block w-100" src="slide3.png" alt="Slide 3" height="500"> </div> </div> <!-- Left and right controls --> <a class="carousel-control-prev" href="#mySlideshow" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#mySlideshow" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
Please note that the browser output of the above code is visually similar to the browser output of the example in section “Fade Transition between Slides” (except the fade transition).
Tip: Carefully identify the time delay between the carousel items (slides) and verify whether it matches your code or not.
Activating Carousels Using JavaScript
Instead of using data attributes, you can use JavaScript code to activate carousels.
The below programming code shows an example of activating a carousel using JavaScript code.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-3">
<div id="mySlideshow" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li id="slide-1" class="active"></li>
<li id="slide-2"></li>
<li id="slide-3"></li>
</ul>
<!-- Slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="slide1.png" alt="Slide 1" height="500">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="slide2.png" alt="Slide 2" height="500">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="slide3.png" alt="Slide 3" height="500">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function(){
// Carousel activation
$("#mySlideshow").carousel();
// Enabling carousel controls
$(".carousel-control-prev").click(function(){
$("#mySlideshow").carousel('prev');
});
$(".carousel-control-next").click(function(){
$("#mySlideshow").carousel('next');
});
// Enabling carousel indicators
$("#slide-1").click(function(){
$("#mySlideshow").carousel(0);
});
$("#slide-2").click(function(){
$("#mySlideshow").carousel(1);
});
$("#slide-3").click(function(){
$("#mySlideshow").carousel(2);
});
});
</script>
</body>
</html>
Please note that the browser output of the above code is visually similar to the browser output of the example in section “Fade Transition between Slides” (except the fade transition).
Frequently Asked Questions
In this section, we will look at some of the frequently asked questions about Bootstrap 4 carousels.
Q #1) What are the different components of a Bootstrap carousel?
Answer: The different components of a Bootstrap carousel are slides, controls, indicators, and captions.
Q #2) Which main classes are used to create a carousel with slides only?
Answer: The main classes used to create a carousel with slides only are the .carousel class, the .slide class, the .carousel-inner class, the .carousel-item class, and the .active class.
Q #3) What is the main attribute that is used to activate a carousel?
Answer: The main attribute that is used to activate a carousel is the data-ride=”carousel” attribute.
Q #4) Is it mandatory to add controls to a carousel?
Answer: No, it is not mandatory to add controls to a carousel.
Q #5) Which classes are used to create carousel controls?
Answer: The classes that are used to create carousel controls are the .carousel-control-prev class, the .carousel-control-next class, the .carousel-control-prev-icon class and the .carousel-control-next-icon class.
Q #6) Is it mandatory to add indicators to a carousel?
Answer: No, it is not mandatory to add indicators to a carousel.
Q #7) Which main class is used to create carousel indicators?
Answer: The main class that is used to create carousel indicators is the .carousel-indicators class.
Q #8) Which class is used to indicate the currently active slide of a carousel while loading the application?
Answer: The .active class is used to indicate the currently active slide of a carousel while loading the application.
Q #9) What will happen if you don’t add the .active class for one of the slides while creating a carousel?
Answer: The carousel will not be visible if you don’t add the .active class for one of the slides.
Q #10) Is it mandatory to add a caption to a carousel?
Answer: No, it is not mandatory to add a caption to a carousel.
Q #11) What kind of elements can be added to the carousel as a caption?
Answer: The elements like headings (<h1> to <h6> elements), paragraphs, etc. can be added to the carousel as a caption.
Q #12) How to add a caption to a carousel?
Answer: Wrap elements like <h1>, <p>, etc. in a <div> element with the .carousel-caption class.
Q #13) What is the function of the data-interval attribute in carousels?
Answer: The function of the data-interval attribute in carousels is to specify the amount of time (in milliseconds) to delay between two adjacent slides.
Q #14) Which class is used to add a fade transition to the Bootstrap slider?
Answer: The class used to add a fade transition to the Bootstrap slider is the .carousel-fade class.
Q #15) How can we create a working carousel without using JavaScript code?
Answer: We can use data attributes to create a working carousel without using JavaScript code.
Conclusion
A carousel is a slide show of images or (slides of) text. Adding controls and indicators are optional, but they provide different options to navigate between slides.
Captions such as headings and paragraphs can be added to the carousel as well. Further, the developer can control the time delay between slides while moving from one slide to another.
=> Read Through The Easy Bootstrap Training Series