How to change Bootstrap Carousel Interval at Runtime ?

Last Updated : 16 Jul, 2021

We will learn how to change carousel intervals at runtime using bootstrap. In this example, we are going to discuss multiple approaches. Bootstrap carousel is a slideshow for sliding through multiple contents built with JavaScript, CSS, and animation. It works with text, images, and custom markups. It also includes previous and next controls and indicators for controlling its motion.

Approach 1: We can control the animation by using the data interval attribute of each carousel item. The given example is the best example for understanding this concept. The Data-interval attribute is used to set the interval time between two carousel item by default its value is 3000 milliseconds.

HTML

<html>
 
<head>
    <!-- CSS only -->
    <link href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          rel="stylesheet" />
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
 
    <title>geeksforgeeks</title>
</head>
 
<body style="width:70%;">
    <div id="carouselExampleIndicators"
         class="carousel slide" data-ride="carousel"
         data-interval="100">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators"
                data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators"
                data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators"
                data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block w-100" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190802021607/geeks14.png"
                     alt="Second slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210223134821/gfg3.jpg"
                     alt="First slide">
            </div>
            <div class="carousel-item" id="image2">
                <img class="d-block w-100" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"
                     alt="Third slide">
            </div>
        </div>
        <a class="carousel-control-prev"
           href="#carouselExampleIndicators"
           role="button" data-slide="prev">
            <span class="carousel-control-prev-icon"
                  aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next"
           href="#carouselExampleIndicators"
           role="button" data-slide="next">
            <span class="carousel-control-next-icon"
                  aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</body>
 
</html>

Output:

Approach 2: In this approach, we will change the animation interval using the bootstrap API method. Which takes one argument as an interval of unit millisecond i.e. (1s=1000milisecond). The interval that we assign will change the animation time between all carousel items in runtime. Data-interval in the carousel function is used to set the time between two image slides.

Syntax

$('.carousel').carousel({
    interval: time in millisecond
});

HTML

<html>
 
<head>
    <!-- CSS only -->
    <link href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          rel="stylesheet" />
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
 
    <title>geeksforgeeks</title>
</head>
 
<body style="width:70%;">
    <div id="carouselExampleIndicators"
         class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators"
                data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators"
                data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators"
                data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block w-100" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190802021607/geeks14.png"
                     alt="Second slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210223134821/gfg3.jpg"
                     alt="First slide">
            </div>
            <div class="carousel-item" id="image2">
                <img class="d-block w-100" src=
   "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"
                     alt="Third slide">
            </div>
        </div>
        <a class="carousel-control-prev"
           href="#carouselExampleIndicators"
           role="button" data-slide="prev">
            <span class="carousel-control-prev-icon"
                  aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next"
           href="#carouselExampleIndicators"
           role="button" data-slide="next">
            <span class="carousel-control-next-icon"
                  aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
 
    <script>
        // Handle Bootstrap carousel slide event
        $('.carousel').carousel({
            interval: 100
        });
    </script>
</body>
 
</html>

Output:

Approach 3: We can set the data-interval by using data-attribute and javascript. This approach is quite simple like the above two approaches. In this approach, we are going to select the carousel class div and change the attribute by using the attr() method. The attr() method is a jquery method that sets or returns the attributes and values of the selected elements. When this method is used to return the value it returns the value of the first matched element and if it is used to set the value of the attribute then it set the attribute of one or more attribute.

Syntax:

 $('.carousel').attr(
    "data-interval","interval that you want to set (in milisec)
");

HTML

<html>
    <head>
        <!-- CSS only -->
        <link href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
              rel="stylesheet" />
        <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
        </script>
        <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
        </script>
        <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
        </script>
 
        <title>geeksforgeeks</title>
    </head>
    <body style="width: 70%;">
        <div id="carouselExampleIndicators"
             class="carousel slide"
             data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators"
                    data-slide-to="0"
                    class="active">
                </li>
                <li data-target="#carouselExampleIndicators"
                    data-slide-to="1">
                </li>
                <li data-target="#carouselExampleIndicators"
                    data-slide-to="2">
                </li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img class="d-block w-100"
                         src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190802021607/geeks14.png"
                         alt="Second slide" />
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100"
                         src=
"https://yt3.ggpht.com/ytc/AAUvwnjJqZG9PvGfC3GoV27UlohMeBLxyUdhs9hUbc-Agw=s900-c-k-c0x00ffffff-no-rj"
                         alt="First slide" />
                </div>
                <div class="carousel-item" id="image2">
                    <img class="d-block w-100"
                         src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"
                         alt="Third slide" />
                </div>
            </div>
            <a class="carousel-control-prev"
               href="#carouselExampleIndicators" role="button"
               data-slide="prev">
                <span class="carousel-control-prev-icon"
                      aria-hidden="true">
                </span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next"
               href="#carouselExampleIndicators"
               role="button" data-slide="next">
                <span class="carousel-control-next-icon"
                      aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
        <script>
            //handle Bootstrap carousel slide event
            $(".carousel").attr("data-interval", "100");
        </script>
    </body>
</html>