How to change Bootstrap Carousel Interval at Runtime ? - GeeksforGeeks

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>
Output
Supported Browser:
Google Chrome
Internet Explorer
Firefox
Opera
Safari
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
ysachin2314
Bootstrap-Questions
HTML-Questions
Picked
Technical Scripter 2020
Bootstrap
HTML
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
How to keep gap between columns using Bootstrap?
Tailwind CSS vs Bootstrap
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property