How to change Bootstrap Carousel Interval at Runtime ?
Last Updated :
01 Aug, 2024
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
<!doctype>
<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
Similar Reads
How to Create a Carousel in Bootstrap ?
Carousels are commonly used to showcase multiple images or content dynamically and interactively. It provides a convenient way to implement carousels with built-in functionality and styles. Approach:Create an HTML document with Bootstrap 5 library classes for styling.Create a container with a center
2 min read
How to make Responsive Carousel in Bootstrap ?
Bootstrap Responsive Carousel simplifies the creation of responsive carousels for dynamic content display. Utilize the Carousel component with a suitable HTML structure, ensuring proper sizing and responsive breakpoints for optimal display across devices. ApproachCreate an HTML document with Bootstr
2 min read
How to make multi item carousel using Bootstrap 5
We will learn how to implement a multi-item carousel using Bootstrap 5. The carousel component in Bootstrap 5 provides a user-friendly way to display a rotating set of content, such as images or text, in a sliding manner. This feature is commonly used for showcasing products, portfolios, or any cont
3 min read
Bootstrap 5 Carousel Individual .carousel-item interval
Bootstrap 5 Carousel Individual .carousel-item interval is used to give time intervals to individual carousel items by which the carousel items will be automatically cycled at the given intervals of time.Bootstrap 5 Carousel Classes:carousel-item: This class specifies each item of the carousel.Boots
2 min read
How to fix sliding Carousel in Bootstrap 5 ?
In Bootstrap 5, a Sliding Carousel is a dynamic component that displays a series of images or content sequentially. It enables a visually appealing, automatic, or user-triggered transition between slides. Users can navigate through the slides using controls, creating an interactive and engaging cont
3 min read
How to Design Half-Page Carousel in Bootstrap ?
It can be included in your webpage using “bootstrap.js†or “bootstrap.min.jsâ€. Carousels are not supported properly in Internet Explorer, this is because they use CSS3 transitions and animations to achieve the slide effect. Bootstrap Carousel is image slide show for your webpage to make it look more
2 min read
Bootstrap 5 Carousel Custom Transition
Bootstrap 5 Carousel transition can be customized with the help of the SASS variables that help to set the duration of the transition. The transform transition will need to be defined first if multiple transitions are implemented. In other words, the transition can be set to a custom setting using t
3 min read
React-Bootstrap Carousel Individual Item Intervals
React-Bootstrap Carousel Individual Item Intervals is an attribute of the React Bootstrap component used to set a duration for individual images present in the corousel. By using this, we can set a different duration for all images present in the carousel component.PropsInterval: It is used to speci
2 min read
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 carous
2 min read
React-Bootstrap Carousel Controlled
React-Bootstrap Carousel Controlled is a feature that allows you to style engaging images or content sliders for your web pages. React-Bootstrap's Carousel component provides control, enabling you to take the reins over the carousel's content, navigation, and behavior.React-Bootstrap Carousel Contro
2 min read