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.