Skip to content
Related Articles

Related Articles

Improve Article

Explain the uses of carousel plugin in Bootstrap

  • Last Updated : 26 Sep, 2021
Geek Week

Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. It solves many problems which we had once, including the cross-browser compatibility issue.

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 –>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js”></script>

<!– Bootstrap JavaScript –>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js”></script>

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.
  • 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.

Example:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
  
    <!--Bootstrap CSS-->
    <link rel="stylesheet" href=
  
    <!--JQUERY, Proper.js and Bootstrap Javascript-->
    </script>
    <script src=
    </script>
    <script src=
    </script>
  
    <style>
        img {
            display: block;
            width: 100%;
        }
    </style>
</head>
  
<body>
    <div class="container">
        <div id="carouselExampleControls" 
            class="carousel slide" 
            data-ride="carousel">
              
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src=
                    <div class="carousel-caption">
                        <h3>Red Image</h3>
  
                        <p>
                            Here we can include some 
                            text for the Red Image
                        </p>
                    </div>
                </div>
  
                <div class="carousel-item">
                    <img src=
                    <div class="carousel-caption">
                        <h3>Blue Image</h3>
  
                        <p>
                            Here we can include some 
                            text for the Blue Image
                        </p>
                    </div>
                </div>
  
                <div class="carousel-item">
                    <img src=
                    <div class="carousel-caption">
                        <h3>Green Image</h3>
  
                        <p>
                            Here we can include some 
                            text for the Green Image
                        </p>
                    </div>
                </div>
            </div>
  
            <a class="carousel-control-prev" 
                href="#carouselExampleControls" 
                role="button" data-slide="prev">
                  
                <span class="carousel-control-prev-icon"
                    aria-hidden="true">
                </span>
            </a>
  
            <a class="carousel-control-next" 
                href="#carouselExampleControls" 
                role="button" data-slide="next">
                  
                <span class="carousel-control-next-icon"
                    aria-hidden="true">
                </span>
            </a>
        </div>
    </div>
</body>
  
</html>

Output:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :