Open In App

Bootstrap 5 Carousel With Controls

Improve
Improve
Like Article
Like
Save
Share
Report

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=
          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">
 
            <!-- The slideshow -->
            <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>
    <!-- Bootstrap CDN -->
    <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">
 
            <!-- The slideshow -->
            <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
Previous
Next
Share your thoughts in the comments
Similar Reads