Bootstrap 5 Carousel Options

Last Updated : 29 Dec, 2022

Bootstrap 5 Carousel options which can be used to customize the carousel and use it more efficiently. These options can be passed to the carousel through data attributes or using JavaScript. To add the options using data attributes we just need to add the name of the option data-bs-* by replacing the star in it.

Bootstrap 5 Carousel Options Attribute:

data-bs-*: Options should be passed for data attributes.

Bootstrap 5 Carousel Options: These are the option which are replaceable with * of data-bs-*.

interval: Sets the time delay (in milliseconds) between each slide in an automated cycling system. If false, the carousel won’t spin on its own. The type is number and the default value is 5000ms.
keyboard: Defines whether keyboard actions should cause the carousel to move. The left and right arrow keys on the keyboard may be used to go to the previous and next slide of a carousel when it has the focus. The type is boolean and the default value is “true”.
pause: It pauses the cycling of the carousel when the mouse pointer enters the carousel and resumes the cycling when the mouse pointer leaves the carousel, by default. If set to false, hovering over the carousel won’t pause it. The type is a string.
ride: After the user manually cycles the first item, the carousel automatically plays. Carousel autoplay if set to “carousel”; otherwise, it does not. The type is a string and the default value is “false”.
wrap: Indicates whether the carousel should have hard stops or run constantly (i.e stop at the last slide). The type is boolean and the default value is “true”.
touch(boolean : true{default value}): Indicates whether touchscreen left/right swipe interactions should be supported for the carousel. The type is boolean and the default value is “true”

Syntax:

<div id=".." class="carousel" data-bs-*=value>
  <!-- Carousel Content --!>
</div>

Note: The * in the data-bs-* is replaced by the name of one of the options given above.

Example 1: The code below demonstrates the usage of the three options data-bs-keyboard, data-bs-interval and data-bs-pause. To check the keyboard option click on the link provided in the caption and check on a desktop or PC.

HTML

<!doctype html> 
<html lang="en"> 
<head> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity= 
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"> 
    </script> 
</head> 
  
<body> 
    <h1 class="m-4 text-success"> 
        GeeksforGeeks 
    </h1>     
    <h4 class="ms-4"> 
        Bootstrap 5  Carousel Options 
    </h4> 
  
    <div class="container mb-4 p-4"> 
        <div id="carouselExampleSlidesOnly" 
            class="carousel slide" 
            data-bs-ride="carousel" 
            data-bs-pause="false"
            data-bs-keyboard="false"> 
              
            <div class="carousel-inner"> 
                <div class="carousel-item bg-light active" 
                    data-bs-interval="2000"> 
                    <h1 class="m-4 text-success" > 
                        This is the first slide</h1> 
                    <h4 class="ms-4"> 
                        This slide has a time delay of 2000ms 
                    </h4> 
                </div> 
  
                <div class="carousel-item bg-light" 
                    data-bs-interval="4000"> 
                    <h1 class="m-4 text-danger"> 
                        This is the second slide</h1> 
                    <h4 class="ms-4"> 
                        This slide has a time delay of 4000ms 
                        <br> 
                        In this carousel the pause is false and  
                        it doesn't stops when we hover. 
                    </h4> 
                </div> 
  
                <div class="carousel-item bg-light" 
                    data-bs-interval="6000"> 
                    <h1 class="m-4 text-warning"> 
                        This is the third slide</h1> 
                    <h4 class="ms-4"> 
                        This slide has a time delay of 6000ms 
                        <br> 
                        Here the keyboard option is set to False 
                    </h4> 
                </div> 
            </div> 
        </div> 
    </div> 
</body> 
</html>

Output:

Bootstrap 5 Carousel Options

Example 2: The code below demonstrates the usage of the options data-bs-ride and data-bs-touch.

HTML

<!doctype html> 
<html lang="en"> 
  
<head> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet" integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" 
            integrity= 
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
            crossorigin="anonymous"> 
    </script> 
</head> 
  
<body> 
    <h1 class="m-4 text-success"> 
        GeeksforGeeks 
    </h1> 
    <h4 class="ms-4"> 
        Bootstrap 5 Carousel Options 
    </h4> 
    <div class="container mb-4 p-4  
                text-light text-center"> 
        <div id="carouselExample2" 
             class="carousel slide carousel-fade" 
             data-bs-ride="false"
             data-bs-touch="true"> 
            <div class="carousel-inner"> 
                <div class="carousel-item bg-dark active pb-4"> 
                    <h1 class="m-4 text-success"> 
                        This is the first slide 
                    </h1> 
                    <img src= 
"http://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200-1.png" 
                         width="25%" alt="GFG LOGO"> 
                </div> 
                <div class="carousel-item bg-dark pb-4"> 
                    <h1 class="m-4 text-warning text-center"> 
                        This is the second slide 
                    </h1> 
                    <div class="text-center"> 
                        <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
                            width="25%" alt="GFG LOGO"> 
                    </div> 
                </div> 
                <div class="carousel-item bg-dark pb-4"> 
                    <h1 class="m-4 text-warning"> 
                        This is the third slide 
                    </h1> 
                    <div class="text-center"> 
                        <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20221128115907/gfglogo.png" 
                             width="25%" alt="GFG LOGO"> 
                    </div> 
                </div> 
            </div> 
            <button class="carousel-control-prev" 
                    type="button" 
                    data-bs-target="#carouselExample2" 
                    data-bs-slide="prev"> 
                <span class="carousel-control-prev-icon"></span> 
                <span class="visually-hidden"> 
                    Previous 
                </span> 
            </button> 
            <button class="carousel-control-next" 
                    type="button" 
                    data-bs-target="#carouselExample2" 
                    data-bs-slide="next"> 
                <span class="carousel-control-next-icon"></span> 
                <span class="visually-hidden"> 
                    Next 
                </span> 
            </button> 
        </div> 
    </div> 
</body> 
</html>