VOOZH about

URL: https://www.geeksforgeeks.org/bootstrap/bootstrap-5-carousel-methods/

⇱ Bootstrap 5 Carousel Methods - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

Bootstrap 5 Carousel Methods

Last Updated : 27 Jul, 2025

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.

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.

Output:

Reference:https://getbootstrap.com/docs/5.0/components/carousel/#methods

Comment
Article Tags:

Explore