Bootstrap 5 Carousel With Controls

Bootstrap 5 Carousel With controls means we can add controls to the Carousel for changing the slides of the carousel. 

Note: This can be achieved using HTML <button> as well as HTML <a> tag.

Bootstrap 5 Carousel With Controls Classes:

• carousel-control-prev: This class is used for the carousel previous control.
• carousel-control-next: This class is used for the carousel next control.
• carousel-control-prev-icon: This class is used for the carousel previous icon image.
• carousel-control-next-icon: This class is used for the carousel next icon image.

Syntax:

<button class="carousel-control-prev" type="button"
 data-bs-target="#GFG" data-bs-slide="prev">
 <span class="carousel-control-prev-icon" aria-hidden="true">
 ...
 </span>
 <span class="visually-hidden">...</span>
</button>

Example 1: In this example, we will learn about Carousel Controls using the HTML <button> tag.

Output:

Example 2: In this example, we will learn about Carousel Controls using an HTML <a> tag. We need to add role="button" in <a> tag.

Output:

References: https://getbootstrap.com/docs/5.0/components/carousel/#with-controls