Bootstrap 5 carousel

Bootstrap 5 carousel is a slideshow that cycles through various content using classes. It works with a collection of pictures, text, or unique markup elements. Additionally, it supports previous and next indicators and buttons.

The following table shows carousel classes with a detailed description.

Class	Description
"carousel"	It creates a carousel function on the web page.
"carousel-indicators"	This class provides more carousel indicators. It indicates the number of slides in the carousel and which slide the user is currently showing or working on. The tiny dots on each slide's bottom represent the slide's indicator.
"carousel-inner"	It inserts slides in the carousel class.
"carousel-item"	It specifies the data or information on the carousel slide.
"carousel-control-prev"	It provides a previous or left button to the carousel. It allows the user to go to the previous slide of the carousel.
"carousel-control-next"	It provides a next or right button to the carousel. It allows the user to go next slide of the carousel.
"carousel-control-next-icon"	It comes with the carousel-control-next to create a "next or right side" button.
"carousel-control-prev-icon"	It comes with the "carousel-control-prev" class to create a "previous or left side" button.
"slide"	It provides a CSS style transition and animation effect to the carousel function. It slides from one item to the next. The carousel function removes the class if you do not want this effect.

Basic carousel

The basic carousel uses different images in the slides with the next and previous buttons. This function uses on top of the web application. It attracts users' interaction and shows essential information.

Syntax

The following syntax shows basic carousel function using bootstrap 5 classes.

<div id = "carouseldemo" class = "carousel slide" data-bs-ride = "carousel">
<div class = "carousel-inner">
<div class = "carousel-item">
<img src = "image.jpg" alt = "image2" class = "d-block" style = "width:100%;">
</div>
</div>
</div>

The following syntax shows basic previous and next button for carousel function.

<div id = "carouseldemo" class = "carousel slide" data-bs-ride = "carousel">
<button class = "carousel-control-prev" type = "button" data-bs-target = "#carouseldemo" data-bs-slide = "prev"> <span class = "carousel-control-prev-icon"></span>
</button>
<button class = "carousel-control-next" type = "button" data-bs-target = "#carouseldemo" data-bs-slide = "next"> <span class = "carousel-control-next-icon"></span>
</button>
</div>

Example

The following example uses four slides with images. It shows next and previous button.

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 Carousel Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
</head>
<body>
<div class = "container" id = "alertcont" style = "width:50%;height:50%;">
<h2> Bootstrap5 Carousel </h2>
<div id = "carouseldemo" class = "carousel slide" data-bs-ride = "carousel">
<!-- The slideshow with images -->
<div class = "carousel-inner">
<div class = "carousel-item active">
<img src = "G:\writing stuff\content-writing\JavaTpoint\2022\may\starts.jpg" alt = "image1" class = "d-block" style = "width:100%;">
</div>
<div class = "carousel-item">
<img src = "G:\writing stuff\content-writing\JavaTpoint\2022\may\guudu.jpg" alt = "image2" class = "d-block" style = "width:100%;">
</div>
<div class = "carousel-item">
<img src = "G:\writing stuff\content-writing\JavaTpoint\2022\may\starts.jpg" alt = "image3" class = "d-block" style = "width:100%;">
</div>
<div class = "carousel-item">
<img src = "G:\writing stuff\content-writing\JavaTpoint\2022\may\guudu.jpg" alt = "image4" class = "d-block" style = "width:100%;">
</div>
</div>
<!-- previous and next icons -->
<button class = "carousel-control-prev" type = "button" data-bs-target = "#carouseldemo" data-bs-slide = "prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class = "carousel-control-next" type = "button" data-bs-target = "#carouseldemo" data-bs-slide = "next">
<span class = "carousel-control-next-icon"></span>
</button>
</div>
</div>
</body>
</html>

Output

The following output shows the carousel function with images.

Basic carousel with indicator

The carousel function includes an indicator to show many slides are available in the function. The indicator shows the current working slide, previous slides and next slides.

Syntax

The following syntax shows carousel function with indicator using bootstrap 5 classes.

<div id = "carouseldemo" class = "carousel slide" data-bs-ride = "carousel">
<div class="carousel-indicators">
<button type = "button" data-bs-target = "#carouseldemo" data-bs-slide-to = "0"></button>
</div>
//other carousel function code
</div>

Example

The following example uses four slides with indicator. The first slide is active with active indicator. The other slides can use with next and previous buttons and imdicators.

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 Carousel Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
</head>
<body>
<div class = "container" id = "alertcont" style = "width:50%;height:50%;">
<h2> Bootstrap5 Carousel </h2>
<div id = "carouseldemo" class = "carousel slide" data-bs-ride = "carousel">
<!-- Indicators of carousel -->
<div class="carousel-indicators">
<button type = "button" data-bs-target = "#carouseldemo" data-bs-slide-to = "0" class="active"></button>
<button type = "button" data-bs-target = "#carouseldemo" data-bs-slide-to = "1"></button>
<button type = "button" data-bs-target = "#carouseldemo" data-bs-slide-to = "2"></button>
<button type = "button" data-bs-target = "#carouseldemo" data-bs-slide-to = "3"></button>
</div>
<!-- The slideshow with images -->
<div class = "carousel-inner">
<div class = "carousel-item active">
<img src = "G:\writing stuff\content-writing\JavaTpoint\2022\may\starts.jpg" alt = "image1" class = "d-block" style = "width:100%;">
</div>
<div class = "carousel-item">
<img src = "G:\writing stuff\content-writing\JavaTpoint\2022\may\guudu.jpg" alt = "image2" class = "d-block" style = "width:100%;">
</div>
<div class = "carousel-item">
<img src = "G:\writing stuff\content-writing\JavaTpoint\2022\may\starts.jpg" alt = "image2" class = "d-block" style = "width:100%;">
</div>
<div class = "carousel-item">
<img src = "G:\writing stuff\content-writing\JavaTpoint\2022\may\guudu.jpg" alt = "image2" class = "d-block" style = "width:100%;">
</div>
</div>
<!-- previous and next icons -->
<button class = "carousel-control-prev" type = "button" data-bs-target = "#carouseldemo" data-bs-slide = "prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class = "carousel-control-next" type = "button" data-bs-target = "#carouseldemo" data-bs-slide = "next">
<span class = "carousel-control-next-icon"></span>
</button>
</div>
</div>
</body>
</html>

Output

The following output shows the carousel function with indicators.

Basic carousel with the caption

The carousel function includes extra information with the slide. It shows information, content and heading of the carousel function.

Syntax

The following syntax shows carousel function with caption using bootstrap 5 classes.

<div id = "carouseldemo" class = "carousel slide" data-bs-ride = "carousel">
<div class = "carousel-inner">
<div class = "carousel-item">
<img src = "image.jpg" alt = "image2" class = "d-block" style = "width:100%;">
<div class = "carousel-caption d-none d-md-block">
//information
</div>
</div>
</div>
</div>

Example

The following example uses four slides with indicator. The first slide is active with active indicator.

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 Carousel Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
</head>
<body>
<div class = "container" id = "alertcont" style = "width:25%;height:25%;">
<h2> Bootstrap5 Carousel </h2>
<div id = "carouseldemo" class = "carousel slide" data-bs-ride = "carousel">
<!-- Indicators of carousel -->
<div class = "carousel-indicators">
<button type = "button" data-bs-target = "#carouseldemo" data-bs-slide-to = "0" class = "active"></button>
<button type = "button" data-bs-target = "#carouseldemo" data-bs-slide-to = "1"></button>
<button type = "button" data-bs-target = "#carouseldemo" data-bs-slide-to = "2"></button>
</div>
<div class = "carousel-inner">
<div class = "carousel-item active">
<img src = "G:\writing stuff\content-writing\JavaTpoint\2022\may\timespace.jpg" alt = "image1" class = "d-block" style = "width:100%;">
<div class = "carousel-caption d-none d-md-block">
<h4> First slide </h4>
<p> Bootstrap 5 carousel is a slideshow that cycle through a variety of content using classes.  </p>
</div>
</div>
<div class = "carousel-item">
<img src = "G:\writing stuff\content-writing\JavaTpoint\2022\may\guudu.jpg" alt = "image2" class = "d-block" style = "width:100%;">
<div class = "carousel-caption d-none d-md-block">
<h4> Second slide </h4>
<p> Bootstrap 5 carousel is a slideshow that cycle through a variety of content using classes.  </p>
</div>
</div>
<div class = "carousel-item">
<img src = "G:\writing stuff\content-writing\JavaTpoint\2022\may\timespace.jpg" alt = "image3" class = "d-block" style = "width:100%;">
<div class = "carousel-caption d-none d-md-block">
<h4> Third slide </h4>
<p> Bootstrap 5 carousel is a slideshow that cycle through a variety of content using classes.  </p>
</div>
</div>
</div>
<button class = "carousel-control-prev" type = "button" data-bs-target = "#carouseldemo" data-bs-slide = "prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class = "carousel-control-next" type = "button" data-bs-target = "#carouseldemo" data-bs-slide = "next">
<span class = "carousel-control-next-icon"></span>
</button>
</div>
</div>
</body>
</html>

Output

The following output shows the carousel function with caption.

Basic carousel with interval

The carousel function shows essential information with multiple slides. The slides move automatically after some interval. We can set a time limit on the image displayed on the web screen.

Syntax

The following syntax shows carousel function with interval using bootstrap 5 classes.

<div id = "carouseldemo" class = "carousel slide" data-bs-ride = "carousel">
<div class = "carousel-inner">
<div class = "carousel-item" data-bs-interval = "5000">
</div>
</div>
</div>

Example

The following example uses three slides with interval. The first slide is active with large size interval than the other slides.

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 Carousel Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
</head>
<body>
<div class = "container" id = "alertcont" style = "width:25%;height:25%;">
<h2> Bootstrap5 Carousel </h2>
<div id = "carouseldemo" class = "carousel slide" data-bs-ride = "carousel">
<!-- Indicators of carousel -->
<div class = "carousel-indicators">
<button type = "button" data-bs-target = "#carouseldemo" data-bs-slide-to = "0" class = "active"></button>
<button type = "button" data-bs-target = "#carouseldemo" data-bs-slide-to = "1"></button>
<button type = "button" data-bs-target = "#carouseldemo" data-bs-slide-to = "2"></button>
</div>
<div class = "carousel-inner">
<div class = "carousel-item active" data-bs-interval = "5000">
<img src = "G:\writing stuff\content-writing\JavaTpoint\2022\may\timespace.jpg" alt = "image1" class = "d-block" style = "width:100%;">
<div class = "carousel-caption d-none d-md-block">
<h4> First slide </h4>
<p> Bootstrap 5 carousel is a slideshow that cycle through a variety of content using classes.  </p>
</div>
</div>
<div class = "carousel-item" data-bs-interval = "3000">
<img src = "G:\writing stuff\content-writing\JavaTpoint\2022\may\guudu.jpg" alt = "image2" class = "d-block" style = "width:100%;">
<div class = "carousel-caption d-none d-md-block">
<h4> Second slide </h4>
<p> Bootstrap 5 carousel is a slideshow that cycle through a variety of content using classes.  </p>
</div>
</div>
<div class = "carousel-item">
<img src = "G:\writing stuff\content-writing\JavaTpoint\2022\may\timespace.jpg" alt = "image3" class = "d-block" style = "width:100%;">
<div class = "carousel-caption d-none d-md-block">
<h4> Third slide </h4>
<p> Bootstrap 5 carousel is a slideshow that cycle through a variety of content using classes.  </p>
</div>
</div>
</div>
<button class = "carousel-control-prev" type = "button" data-bs-target = "#carouseldemo" data-bs-slide = "prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class = "carousel-control-next" type = "button" data-bs-target = "#carouseldemo" data-bs-slide = "next">
<span class = "carousel-control-next-icon"></span>
</button>
</div>
</div>
</body>
</html>

Output

The following output shows the carousel function with intervals.

Dark Carousel

The carousel function uses the "carousel-dark" to display indicators, buttons and other info in dark colours. According to the web page template, it gives an attractive, stylish, and interactive carousel function.

Syntax

The following syntax shows carousel function with interval using bootstrap 5 classes.

<div id = "carouseldemo" class = "carousel carousel-dark slide" data-bs-ride = "carousel">
</div>

Example

The following example uses two slides with interval and dark carousel.

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 Carousel Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
</head>
<body>
<div class = "container" id = "alertcont" style = "width:25%;height:25%;">
<h2> Bootstrap Carousel </h2>
<div id = "carouseldemo" class = "carousel carousel-dark slide" data-bs-ride = "carousel">
<div class = "carousel-indicators">
<button type = "button" data-bs-target = "#carouseldemo" data-bs-slide-to = "0" class = "active"></button>
<button type = "button" data-bs-target = "#carouseldemo" data-bs-slide-to = "1"></button>
<button type = "button" data-bs-target = "#carouseldemo" data-bs-slide-to = "2"></button>
</div>
<div class = "carousel-inner">
<div class = "carousel-item active" data-bs-interval = "5000">
<img src = "G:\writing stuff\content-writing\JavaTpoint\2022\may\pinapple.png" alt = "image1" class = "d-block" style = "width:100%;">
<div class = "carousel-caption d-none d-md-block">
<h6> Bootstrap 5 carousel is a slideshow that cycle through a variety of content using classes.  </h6>
</div>
</div>
<div class = "carousel-item" data-bs-interval = "3000">
<img src = "G:\writing stuff\content-writing\JavaTpoint\2022\may\mango.png" alt = "image2" class = "d-block" style = "width:100%;">
<div class = "carousel-caption d-none d-md-block">
<h6> Bootstrap 5 carousel is a slideshow that cycle through a variety of content using classes.  </h6>
</div>
</div>
<div class = "carousel-item" data-bs-interval = "2000">
<img src = "G:\writing stuff\content-writing\JavaTpoint\2022\may\pinapple.png" alt = "image2" class = "d-block" style = "width:100%;">
<div class = "carousel-caption d-none d-md-block">
<h6> Bootstrap 5 carousel is a slideshow that cycle through a variety of content using classes.  </h6>
</div>
</div>
</div>
<button class = "carousel-control-prev" type = "button" data-bs-target = "#carouseldemo" data-bs-slide = "prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class = "carousel-control-next" type = "button" data-bs-target = "#carouseldemo" data-bs-slide = "next">
<span class = "carousel-control-next-icon"></span>
</button>
</div>
</div>
</body>
</html>

Output

The following output shows the dark carousel function with intervals.

Conclusion

The bootstrap 5 carousel function displays essential and interactive information on the web page. It shows information, heading and images to the users and attracts interaction of the users. It works for e-commerce, advertisement and other websites for showing important data.

Next TopicBootstrap 5 navbar

← prev next →