What is Carousel in Bootstrap?

Web Development
,
#1

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.