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.
Carousel Classes
| 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
<html lang = "en"><head>
<title> Bootstrap 5 Example </title>
<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>
<div class="container" id = "alertcont" style = "width:50%;height:50%;">
<h2>Bootstrap5 Carousel</h2>
<p>Alerts are created with the .alert class, followed by a contextual color classes:</p>
<div id = "carouseldemo" class = "carousel slide" data-bs-ride = "carousel">
<div class = "carousel-inner">
<div class = "carousel-item active">
<img src=""class = "d-block" style = "width:100%;">
</div>
<div class = "carousel-item">
<img src=""class = "d-block" style = "width:100%;">
</div>
<div class = "carousel-item">
<img src=""class = "d-block" style = "width:100%;">
</div>
<div class = "carousel-item">
<img src=""class = "d-block" style = "width:100%;">
</div>
<button class = "carousel-control-prev" type = "button" data-bs-target = "#carouseldemo" data-bs-slide = "prev"> <span class="carousel-control-prev-icon"> </span> </span> </button>
<button class = "carousel-control-next" type = "button" data-bs-target = "#carouseldemo" data-bs-slide = "next"> <span class="carousel-control-next-icon"> </span> </span> </button>
</div>
</div>
</body>
</html>