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.
HTML
<!DOCTYPE html> < html > < head > <!-- Bootstrap CDN --> < link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity = "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin = "anonymous" > < script src = "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity = "sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin = "anonymous" > </ script > </ head > < body class = "m-2 text-center" > < div > < h1 class = "text-success" > w3wiki </ h1 > < h3 >Bootstrap 5 Carousel With controls</ h3 > < div id = "GFG" class = "carousel slide carousel-fade" data-ride = "carousel" > <!-- The slideshow --> < div class = "carousel-inner" > < div class = "carousel-item active" > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/Java.png" height = "400px" width = "400px" alt = "Java" class = "d-block w-100" > </ div > < div class = "carousel-item" > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png" height = "400px" width = "400px" alt = "HTML" class = "d-block w-100" > </ div > < div class = "carousel-item" > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png" height = "400px" width = "400px" alt = "Angular" class = "d-block w-100" > </ div > < button class = "carousel-control-prev" href = "#GFG" data-slide = "prev" > < span class = "carousel-control-prev-icon" > </ span > </ button > < button class = "carousel-control-next" href = "#GFG" data-slide = "next" > < span class = "carousel-control-next-icon" > </ span > </ button > </ div > </ div > </ div > </ body > </ html > |
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.
HTML
<!DOCTYPE html> < html > < head > <!-- Bootstrap CDN --> < link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity = "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin = "anonymous" > < script src = "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity = "sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin = "anonymous" > </ script > </ head > < body class = "m-2 text-center" > < div > < h1 class = "text-success" > w3wiki </ h1 > < h3 >Bootstrap 5 Carousel With Controls</ h3 > < div id = "GFG" class = "carousel slide carousel-fade" data-ride = "carousel" > <!-- The slideshow --> < div class = "carousel-inner" > < div class = "carousel-item active" > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/Java.png" height = "400px" width = "400px" alt = "Java" class = "d-block w-100" > </ div > < div class = "carousel-item" > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png" height = "400px" width = "400px" alt = "HTML" class = "d-block w-100" > </ div > < div class = "carousel-item" > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png" height = "400px" width = "400px" alt = "Angular" class = "d-block w-100" > </ div > < a class = "carousel-control-prev" href = "#GFG" data-slide = "prev" role = "button" > < span class = "carousel-control-prev-icon" > </ span > </ a > < a class = "carousel-control-next" href = "#GFG" data-slide = "next" role = "button" > < span class = "carousel-control-next-icon" > </ span > </ a > </ div > </ div > </ div > </ body > </ html > |
Output:
References: https://getbootstrap.com/docs/5.0/components/carousel/#with-controls
Contact Us