Bootstrap 5 Carousel Methods
Last Updated :
26 Jul, 2024
Bootstrap 5 Carousel Methods are used with JavaScript to implement different settings and variations to the carousel.
Bootstrap 5 Carousel Methods:
- cycle: Using this method, a carousel will rotate through the slides from left to right.
- pause: Using this method, a carousel will stop rotating through the slides.
- prev: Using this method, a carousel will rotate through the slides to the left.
- next: Using this method, a carousel will rotate through the slides to the right.
- nextWhenVisible: Using this method, when a page, a carousel, or one of its parents is hidden, do not move to the next item in the carousel.
- to: Using this method, the view is rotated to the item which is specified and the number direction starts with 0 like an array.
- dispose: Using this method, the element's instance can be destroyed from the DOM completely.
- getInstance: Using this static method, the instance of the carousel is obtained which is associated with the DOM element.
- getOrCreateInstance Using this static method, the instance of the carousel which is associated with the DOM element is obtained or created if no instance is present.
Syntax:
var carousel-element = document.getElementById("myCarousel");
var carousel-instance = new bootstrap.Carousel(carousel-element)
carousel-instance.cycle;
carousel-instance.to(page-number)
bootstrap.Carousel.getInstance(carousel-element); Example 1: The code example shows how to implement carousel methods. The getOrCreateInstance() method is used to obtain the instance of the carousel and implement the prev(), next(), cycle(), pause(), and to() methods.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<h1 class="m-4 text-success">
GeeksforGeeks</h1>
<h4 class="ms-4">
Bootstrap 5 Carousel Methods</h4>
<div class="container mb-4 p-4
text-light text-center">
<div id="carouselExample"
class="carousel slide carousel-fade">
<div class="carousel-inner">
<div class="carousel-item bg-secondary active"
data-bs-interval="2000">
<h1 class="m-4 text-info">
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-secondary"
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</h4>
</div>
<div class="carousel-item bg-secondary"
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</h4>
</div>
</div>
<button class="carousel-control-prev"
type="button"
id="prevSlide">
<span class="carousel-control-prev-icon"
aria-hidden="true"></span>
<span class="visually-hidden">
Previous
</span>
</button>
<button class="carousel-control-next"
type="button"
id="nextSlide">
<span class="carousel-control-next-icon"
aria-hidden="true"></span>
<span class="visually-hidden">
Next
</span>
</button>
</div>
<div class="container">
<button class="btn btn-success mt-5"
id="cycleCarousel">
Cycle Carousel
</button>
<button class="btn btn-danger mt-5"
id="pauseCarousel">
Pause Carousel</button>
</div>
<div class="container">
<button class="btn btn-secondary mt-5"
id="slideOne">
Slide One
</button>
<button class="btn btn-secondary mt-5"
id="slideTwo">
Slide Two
</button>
<button class="btn btn-secondary mt-5"
id="slideThree">
Slide Three
</button>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function(){
var prevSlide =
document.getElementById("prevSlide");
var nextSlide =
document.getElementById("nextSlide");
var cycleCarousel =
document.getElementById("cycleCarousel");
var pauseCarousel =
document.getElementById("pauseCarousel");
var slideOne =
document.getElementById("slideOne");
var slideTwo =
document.getElementById("slideTwo");
var slideThree =
document.getElementById("slideThree");
// Create a carousel instance
var carouselElement =
document.getElementById("carouselExample");
var myCarousel = new bootstrap.Carousel(carouselElement);
// Cycles to the previous item
prevSlide.addEventListener("click", function(){
myCarousel.prev();
});
// Cycles to the next item
nextSlide.addEventListener("click", function(){
myCarousel.next();
});
cycleCarousel.addEventListener("click", function(){
myCarousel.cycle();
});
pauseCarousel.addEventListener("click", function(){
myCarousel.pause();
});
slideOne.addEventListener("click", function(){
myCarousel.to(0);
});
slideTwo.addEventListener("click", function(){
myCarousel.to(1);
});
slideThree.addEventListener("click", function(){
myCarousel.to(2);
});
});
</script>
</body>
</html>
Output:
Example 2: The following code example also shows how to implement carousel methods. The getOrCreateInstance() method is used to obtain the instance of the carousel and implement the prev(), next(), and dispose() methods.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<h1 class="m-4 text-success">
GeeksforGeeks</h1>
<h4 class="ms-4">
Bootstrap 5 Carousel Methods</h4>
<div class="container mb-4 p-4
text-light text-center">
<div id="carouselExample"
class="carousel slide carousel-fade">
<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-danger">
This is the third slide</h1>
<div class="text-center">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20230320105541/gfg_school.png"
width="25%"
alt="GFG LOGO">
</div>
</div>
</div>
<button class="carousel-control-prev"
type="button"
id="prevSlide">
<span class="carousel-control-prev-icon"
aria-hidden="true">
</span>
<span class="visually-hidden">
Previous
</span>
</button>
<button class="carousel-control-next"
type="button"
id="nextSlide">
<span class="carousel-control-next-icon"
aria-hidden="true">
</span>
<span class="visually-hidden">
Next
</span>
</button>
</div>
<button class="btn btn-success mt-4"
id="gOC-Carousel">
Get or Create Carousel Instance
</button>
<button class="btn btn-danger mt-4"
id="disposeCarousel">
Get or Create Instance and dispose
</button>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
var prevSlide =
document.getElementById("prevSlide");
var nextSlide =
document.getElementById("nextSlide");
var gOC_Carousel =
document.getElementById("gOC-Carousel");
var disposeCarousel =
document.getElementById("disposeCarousel");
// Create a carousel instance
var carouselElement =
document.getElementById("carouselExample");
gOC_Carousel.addEventListener("click", function () {
var myCarousel =
bootstrap.Carousel.getOrCreateInstance(carouselElement);
console.log(myCarousel);
});
// Cycles to the previous item
prevSlide.addEventListener("click", function () {
var myCarousel =
bootstrap.Carousel.getOrCreateInstance(carouselElement);
myCarousel.prev();
});
// Cycles to the next item
nextSlide.addEventListener("click", function () {
var myCarousel =
bootstrap.Carousel.getOrCreateInstance(carouselElement);
myCarousel.next();
});
// Cycles the carousel to first slide
disposeCarousel.addEventListener("click", function () {
var myCarousel =
bootstrap.Carousel.getOrCreateInstance(carouselElement);
myCarousel.dispose();
console.log(myCarousel);
});
});
</script>
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.0/components/carousel/#methods
Similar Reads
Bootstrap 5 Carousel Slides only Bootstrap 5 Carousel Slides only is a type of carousel where there is nothing in the slides of the carousel like the previous, next buttons, captions, and indicators. This carousel is the easiest one to implement as it has the least amount of components but this has the least user accessibility.Boot
3 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
Bootstrap 5 Carousel With Indicators Bootstrap 5 Carousel With indicators are used to create indicators in the carousel. We can click on these indicators, to change from one slide to another.Bootstrap 5 Carousel With Indicators Classes:carousel-indicators: This class is used for including carousel indicators in the HTML div container.S
2 min read
Bootstrap 5 Carousel With Captions Bootstrap 5 Carousel With captions means we can add a class carousel-caption to the carousel items to add a caption for them.Bootstrap 5 Carousel With Captions Class:carousel-caption: This class is used for giving carousel captions.Syntax<div class="carousel-caption"> ...</div>Example 1:
2 min read
Bootstrap 5 Carousel Crossfade Bootstrap 5 Carousel Crossfade is used to create a carousel animate slide show effect in Crossfade style. To make this effect, the .carousel-fade class is used.Carousel Crossfade used Class:.carousel-fade: This class is used to add the fade effect in the carousel slide animation.Syntax:<div id="G
2 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
Bootstrap 5 Carousel Disable Touch Swiping Bootstrap5 Carousel Disable Touch Swiping can be used to disable the left/right swipe of the slides with touch on a touchscreen, by specifying the data-bs-touch attribute. Setting the data-bs-interval attribute as false will stop the autoplay of the slides.Disable touch swiping Class: There is no cl
3 min read
Bootstrap 5 Carousel Dark variant Bootstrap 5 Carousel Dark variant is by default, controls, indicators, and captions have white colors. But, for Darker controls, indicators, and captions, we can add a class carousel-dark to the carousel. Used class:carousel-dark: This class is used to include the dark variant for the carousel conta
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
Bootstrap 5 Carousel SASS Bootstrap 5 Â Carousel SASS has a set of variables with default values that can be changed to customize the Carousel.Bootstrap 5 Carousel SassVariables: Carousel variables have a default value that can be customized to make a new Carousel layout.Default values of Carousel SASS variables$carousel-cont
4 min read