Bootstrap Carousel

A Carousel in Bootstrap 4 is nothing but a slideshow that can be used for cycling through elements.

Bootstrap Creating a Carousel

Observe the code below to understand how a Carousel is created.

So here’s what actually happened:

  • .carousel was used to create a Carousel
  • .carousel-indicators was used to add the indicators. These are the little dots present at the bottom of each slide indicating the number of and currently viewing slides.
  • .carousel-inner is the class for adding slides while the .carousel-item will specify the content of each slide
  • .carousel-control-prev and .carousel-control-next is be used to add buttons for moving to left (previous) and right (next) slides in the carousel. The icons for the same can be created using the .carousel-control-prev-icon and .carousel-control-next-icon classes.
  • .slide class can be used to add animation while sliding through the carousel.

Add Captions to Slides

A caption for each slide can be added to the carousel by adding <div class="carousel-caption"> within each <div class="carousel-item">.

The code below illustrates the same:

Carousel Methods

Bootstrap 4 has many methods for the carouse that can help make it more suitable as per the page requirements. Here’s the list for the same:

  • .carousel(options): Can be called for activating carousel with some options. There are basically 3 options:
    • interval: Any number value or the Boolean false. Used to set delays between slides. The false prohibits automatic switch to the next slide. The default value here is 5000.
    • pause: Any string value or the Boolean false. Pauses the carousel when the mouse pointer hovers over the carousel. This feature can be disabled using the Boolean false. Default value is “hover”
    • wrap: Boolean true or false. The true value means that the slides will keep switching continuously. This means, once the last slide comes, the next slide will be the first one and so on. If false, the switching will stop once the last slide comes. The default value is true.
  • .carousel(“cycle”): Can cycle through the carousel items starting from left and all the way to the right
  • .carousel(“pause”): Can stop the automatic switching through the carousel items
  • .carousel(number): Can go to a specific carousel item. The indexing starts from 0 i.e. 0 is the first slide and so on.
  • .carousel(“prev”): Will take you to the previous item in the slide
  • .carousel(“next”): Will take you to the next item in the slide

Note: The event is said to occur when the carousel is just about to slide from one item to another.