Explain the uses of carousel plugin 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.
<!– Bootstrap CSS –>
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css”>
<!– jQuery –>
<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js” ></script>
<!– Proper.js –>
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 a 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.
- 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.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.