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 >
< link rel = "stylesheet"
href =
integrity = "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin = "anonymous" >
< script src =
integrity = "sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin = "anonymous" >
</ script >
</ head >
< body class = "m-2 text-center" >
< div >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h3 >Bootstrap 5 Carousel With controls</ h3 >
< div id = "GFG" class = "carousel slide carousel-fade"
data-ride = "carousel" >
< div class = "carousel-inner" >
< div class = "carousel-item active" >
< img src =
height = "400px" width = "400px"
alt = "Java" class = "d-block w-100" >
</ div >
< div class = "carousel-item" >
< img src =
height = "400px" width = "400px"
alt = "HTML" class = "d-block w-100" >
</ div >
< div class = "carousel-item" >
< img src =
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 >
< link rel = "stylesheet"
href =
integrity = "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin = "anonymous" >
< script src =
integrity = "sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin = "anonymous" >
</ script >
</ head >
< body class = "m-2 text-center" >
< div >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h3 >Bootstrap 5 Carousel With Controls</ h3 >
< div id = "GFG" class = "carousel slide carousel-fade"
data-ride = "carousel" >
< div class = "carousel-inner" >
< div class = "carousel-item active" >
< img src =
height = "400px" width = "400px"
alt = "Java" class = "d-block w-100" >
</ div >
< div class = "carousel-item" >
< img src =
height = "400px" width = "400px"
alt = "HTML" class = "d-block w-100" >
</ div >
< div class = "carousel-item" >
< img src =
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
Last Updated :
02 Feb, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...