Bootstrap is a free & open-source CSS framework that aims to be a mobile-first front-end web development framework. It contains CSS & JavaScript-based interface components design templates like forms, buttons, navbar, and many more.

What is Bootstrap Carousel?

A simple slideshow shows a generic component for cycling through the elements like a carousel using the Bootstrap carousel plugin. To implement the carousel, you need to add the code with the markup. There is no need for data attributes. It's just class-based development.

What are some drawbacks of Bootstrap Carousel?

Carousels that are auto-forward could be challenging to read before the new slide appears. It's impossible to stop the Bootstrap carousel if you want more time to read. Image carousel often contains a substantial amount of text that is not appropriate for the image's alt text.

Bootstrap Carousel Plugin

Source: Bootstrap 5

Introduction

The Bootstrap carousel is an easy, flexible, and responsive way to add a slider to your website. Comprising with CSS 3D transforms and some JavaScript, it is flexible enough to house images, iframes, videos, or just about any content that you want.

How it works

Include the following link in the <head> element to use Bootstrap.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

Along with this, to add functionality to your website, you should have to include the following script tags before the </body> as well.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

To add the Bootstrap Carousel to your website, you should do the following steps.

Create a <div> with class .carousel and .slide.
Create another <div> with class .carousel-inner.
Use data-bs-interval=”…” to specify the time duration.
In this <div> add sufficient div elements according to your needs.

Working Example

  <div class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="image1.png" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="image2.png" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="image3.png" class="d-block w-100" alt="...">
      </div>
    </div>
  </div>

Output

With Controls, indicators, and captions

  <div class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
      <button type="button" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="image1.png" class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>First slide</h5>
          <p>Some placeholder content for this slide.</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="image2.png" class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>Second slide</h5>
          <p>Some placeholder content for this slide.</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="image3.png" class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>Third slide</h5>
          <p>Some placeholder content for this slide.</p>
        </div>
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>

Output

Usage

With data attributes - Use data attributes to easily control the carousel's position.
- data-slide - Accepts the keywords prev or next, altering the slide position relative to its current position.
- data-slide-to - Use it to pass a raw slide index to the Bootstrap carousel data-slide-to = "2". It shifts the slide position to a particular index beginning with 0.
- data-ride = "carousel" - Attribute is used to mark a carousel as an animation starting at page load.
With JavaScript − With JavaScript, we can manually call the carousel as below -

let myCarousel = document.querySelector('#myCarousel');
let carousel = new bootstrap.Carousel(myCarousel);

Options

You can pass Options with data attributes or JavaScript. Append the option name to data-bs- like data-bs-interval="" for data attributes.

Name	Type / Default	Description
interval	Number/5000	It is the amount of time delay between the automatic cycle of an item. If set to false, the carousel will not automatically cycle.
keyboard	Boolean/true	If true, the carousel should react to keyboard events.
pause	string or boolean/'hover'	If set to true, it pauses the automatic cycling of the carousel when you hover over it.
ride	string or boolean/false	Autoplay the carousel after the user manually cycles the first item. Suppose set to 'carousel', autoplay the carousel on load.
wrap	boolean/true	If true, the carousel should cycle continuously or have hard stops.
touch	boolean/true	If true, the carousel should support left/right swipe interactions on touchscreen devices.

Methods

You can create a carousel with the help of a carousel constructor. To initialize with additional options, start with the following items:

Method	Description
cycle	It cycles through the carousel’s items from left to right.
pause	It stops the carousel’s cycling through items.
prev	It cycles to the previous item and returns to the caller before the last thing has been shown.
next	It cycles to the following article and returns to the caller before the next item has been shown.
nextWhenVisible	Don't cycle the carousel to the next when the page isn't visual or the carousel or its parent isn't visible and returns to the caller before the target item has been shown.
to	Cycles the carousel to a particular frame (starts with 0) and returns to the caller before the target item has been shown.
dispose	Removes stored data on the DOM element.
getInstance	The static method allows you to get the carousel instance associated with the DOM element.
getOrCreateInstance	The static method returns a carousel instance associated with a DOM element or creates a new one in case it wasn't initialized.

let myCarousel = document.querySelector('#myCarousel')
let carousel = new bootstrap.Carousel(myCarousel, {
  interval: 2000,
  wrap: true
});

Events

Bootstrap’s carousel class discloses two events for hooking into carousel functionality. Both events have the following additional properties:

direction: Direction in which the carousel is sliding (i.e. "left" or "right").
relatedTarget: DOM element that is being slid into place as the active item.
from: index of the current item
to: index of the next item

All carousel events are launched at the carousel itself i.e. at the <div class="carousel">.

Event type	Description
slide.bs.carousel	Immediately gets fired when the slide instance method is invoked.
slid.bs.carousel	Launched when the carousel had completed its slide transition.

let myCarousel = document.getElementById('myCarousel')
 
myCarousel.addEventListener('slide.bs.carousel', function () {
  // do something...
});

Frequently Asked Questions

What is Bootstrap?
Bootstrap is a free & open-source CSS framework that aims to be a mobile-first front-end web development framework. It contains CSS & JavaScript-based interface components design templates like forms, buttons, navbar, and many more.
What is Bootstrap Carousel?
A simple slideshow shows a generic component for cycling through the elements like a carousel using the Bootstrap carousel plugin. To implement the carousel, you need to add the code with the markup. There is no need for data attributes. It's just class-based development.
What are some drawbacks of Bootstrap Carousel?
Carousels that are auto-forward could be challenging to read before the new slide appears. It's impossible to stop the Bootstrap carousel if you want more time to read. Image carousel often contains a substantial amount of text that is not appropriate for the image's alt text.

Key Takeaways

In this article, we learn how to use Bootstrap Carousel in our projects and make our websites faster by the magic of templating and open source.

Also, check out our web development course and CSS course.
If you are preparing for your DSA interviews then, Codestudio is a one-stop destination. This platform will help you acquire effective coding techniques and overview student interview experience in various product-based companies.