Bootstrap 5 Carousel Methods

Last Updated : 26 Apr, 2023

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/bootstrap@5.0.2/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/bootstrap@5.0.2/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/bootstrap@5.0.2/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/bootstrap@5.0.2/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>