Carousel is a JavaScript component in Bootstrap allows you to add slider in your site. This works based on CSS 3D transform and allows you to add different variation of slideshows. By default the carousel will occupy full width of the screen, if required you should restrict the width using additional CSS. In this article, we will explain how to create carousel in Bootstrap 5 and you can download the examples used in this tutorial here.
Bootstrap 5 Carousel Tutorial
This tutorial covers the following chapters:
- Basics of carousel component
- Simple carousel with slides showing controls and text
- Carousel with slides and navigational arrows
- Carousel with slides and indicators on bottom
- Adding captions to slide images as title and description
- Controlling options
1. Basics of Bootstrap 5 Carousel Component
- Bootstrap 5 carousel uses CSS 3D transform and JavaScript for creating slideshow. So you should include jQuery and bootstrap.min.js files in your HTML template for using carousel component. Refer our Bootstrap 5 starter template to get the starter template format.
- By default the slides will rotate right to left and the rotation will stop on mouse hover.
- The slides in the carousel will not rotate when the carousel is not visible on the browser. This works on all modern browsers using page visibility API.
- The size of the slides are to be explicitly defined.
- Use “img-fluid” class to ensure the carousel is responsive on all devices.
On all examples used on this tutorial, we restrict the width of carousel to 800px as we have used the same width for the image. The width is restricted using inline style by placing the whole carousel inside a <div> tag.
2. Simple Slide Only Carousel
This is the bare minimum carousel style with only slide images rotating automatically. The code for slide only carousel is given below:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 5 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<!-- Start of Carousel -->
<div id="slider" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide1.jpg" alt="Slide1">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide2.jpg" alt="Slide2">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide3.jpg" alt="Slide3">
</div>
</div>
</div>
<!-- End of Carousel -->
<!-- Bootstrap 5 Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>And the slider will look like a plain image that slides with 5000ms interval by default.
- The carousel starts with a <div> tag having a unique ID. In our example, #slider is the ID. The same <div> should include the classes “.carousel“and “.slide” and the attribute data-ride=”carousel”.
- Next the inner div tag with “.carousel-inner” and the attribute role=”listbox”.
- Then another div for each carousel item with the class “.carousel-item“.
- The img tag has “.d-block“and “.img-fluid” in order to align the images properly on browser.
Note: Use the codes in the below sections in-between the start and end of carousel sections in the above simple carousel code.
3. Carousel with Navigational Arrow
Let us add left and right navigational arrows to the carousel slides.
<div id="arrowslider" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide1.jpg" alt="Slide1">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide2.jpg" alt="Slide2">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide3.jpg" alt="Slide3">
</div>
</div>
<a class="carousel-control-prev" href="#arrowslider" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous Slide</span>
</a>
<a class="carousel-control-next" href="#arrowslider" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next Slide</span>
</a>
</div>
Basically you should add additional code before the outer <div> tag keeping all other carousel items similar to previous slide only example. The navigational arrows are based on HTML anchor tags and uses the class “.carousel-control-prev” and “.carousel-control-next“. Remember to include the href attribute same as the main carousel container id for both previous and next arrows.
There are two span tags used for previous and next arrows to include the icons and screen reader text.
4. Carousel with Indicators
The third carousel option is to add slide indicators at bottom center of the images. This will help to navigate to that particular image instead of using arrows to move one by one.
<div id="sliderindicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#sliderindicators" data-slide-to="0" class="active"></li>
<li data-target="#sliderindicators" data-slide-to="1"></li>
<li data-target="#sliderindicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide1.jpg" alt="Slide1">>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide2.jpg" alt="Slide2">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide3.jpg" alt="Slide3">
</div>
</div>
<a class="carousel-control-prev" href="#sliderindicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#sliderindicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
The slider indicators work based on the ordered list. The <ol> tag uses a class “.carousel-indicators” and each <li> tags in the list should contain two things:
- The data-target attribute which should have the value same as the main carousel ID.
- The data-slide-to attribute with the first value as 0 and increased to 1 and 2 for further two slides.
Remember the “.active” class is included on the first image to start the carousel at the first slide. You can make any of the slide active to start the slideshow from that slide.
5. Carousel with Captions
The final option is to add some title and description on the images like below:
The code for the carousel with captions is given below:
<div id="slidercaption" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#slidercaption" data-slide-to="0" class="active"></li>
<li data-target="#slidercaption" data-slide-to="1"></li>
<li data-target="#slidercaption" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide1.jpg" alt="Slide1">
<div class="carousel-caption d-none d-md-block">
<h3>Here is a caption for slide 1</h3>
<p>Here is short description for slide 1</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide2.jpg" alt="Slide2">
<div class="carousel-caption d-none d-md-block">
<h3>Here is a caption for slide 2</h3>
<p>Here is short description for slide 2</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide3.jpg" alt="Slide3">
<div class="carousel-caption d-none d-md-block">
<h3>Here is a caption for slide 3</h3>
<p>Here is short description for slide 3</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#slidercaption" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#slidercaption" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>You need to simply add new <div> within each carousel item below the <img> tag and use the class “.carousel-caption“. The class “.d-none” is used to hide the carousel captions on small mobile devices and bring it back on the medium sized devices using “.d-md-block“. You can remove”.d-none” and”.d-md-block” classes to show the slider captions on all screens including mobile devices. But ensure to use custom CSS media queries to adjust the font-size and alignment of slider captions.
6. Controlling Options for Carousel
Below are some of the controls you can use to modify the functioning of Bootstrap 5 carousel component.
| Name of the Control | Type | Default Value | Short Description |
|---|---|---|---|
| data-interval | number | 5000 | Time delay in milliseconds between the rotation of carousel images. You can set this value to false to stop auto rotating. |
| data-keyboard | boolean | true | True value indicates that the carousel will respond to keyboard keys and “false” will deactivate the keyboard controls. |
| data-pause | string | “hover” | This is the control for pausing the slider on mouse over event. Setting the value to “null” will not pause the sliders and setting to hover will pause on mouse over. |
| data-ride | string | false | Setting the value to “carousel” will enable the autoplay on loading. And setting the value to “false” will start the autoplay mode only after the user manually cycles the first item. |
| data-wrap | boolean | true | Decides the carousel should be looped continuously or have hard stops. |
For example, add the below script on your HTML template to change the interval of the carousel slider to 1500 milliseconds.
<script>
$('.carousel').carousel({
interval: 1500
})
</script>
Leave a Reply
Your email is safe with us.