What is Carousel in Bootstrap?

Carousel is the slideshow component of bootstrap that is widely used for slideshow or cycling through different elements of an HTML document especially image containers or texts.

Bootstrap CDN links: To learn about the uses of the bootstrap carousel, we have to include the Bootstrap and jQuery CDN library files into the HTML codes.

Uses: The major use of the carousel plugin is to implement a slider or a slideshow of images. The HTML div containing images can also contain text. In this section, we are going to make a slide show of images with the help of the Bootstrap carousel plugin using the following steps.

  • Create an HTML div element with class ‘carousel’. If you want to slideshow the images automatically then also add a class ‘slide’ to it.

  • Give an id “carouselExampleControls” to the div element to control the slideshow with buttons.

  • Add the “data-ride” attribute as “carousel” for triggering JavaScript actions.

  • Inside the div create another nested div with class “carousel-inner”. This div is going to contain all the carousel elements except the buttons used to control the carousel.

  • Inside that div, create another div “carousel-item”. Add the class ‘active’ to the default carousel slide adding the image and caption of the carousel slide. Add as many carousel items as you want.

  • Add the “carousel-control-prev” and the “carousel-control-next” class to the previous and next slide links respectively.

  • Add the “data-slide” attributes as ‘prev’ and ‘next’ for the previous and next icons of the carousel.