How to display bootstrap carousel with three post in each slide?

A Bootstrap Carousel is a slideshow for rotating through series of contents. It is built with CSS and Javascript. It works with a series of photos, images, texts, etc. It can be used as an image slider for showcasing the huge amount of contents within a small space on the web page, as it works on the principle of dynamic presentations.

Syntax:

<div class="container"> Bootstrap image contents... <div>

Following are the steps to create a Bootstrap carousel:

  1. Include Bootstrap Javascript, CSS and JQuery Library files in the head sections, that are pre-loaded and pre-compiled
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>

    chevron_right

    
    

  2. Apply CSS to resize the .carousel Bootstrap card body by using the code segment below.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <style>
     .carousel {
     width:200px;
     height:200px;
     }
     <style>

    chevron_right

    
    

  3. In the body section create a division class with carousel slider using the syntax below
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <div id=”carousel-demo” class=”carousel slide” data-ride=”carousel”>

    chevron_right

    
    

  4. In this step, the sliding images are defined in the division tag as under.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <div class=”carousel-inner”>
    <div class=”item”>
    <img src=”..URL of image”>

    chevron_right

    
    

  5. Last step is to add controls to slide images using the carousel-control class as below.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <a class="left carousel-control" href="#carousel-demo2" data-slide="prev">
        <span class="icon-prev"></span>
    </a>
    <a class="right carousel-control" href="#carousel-demo2" data-slide="next">
        <span class="icon-next"></span>
    </a>

    chevron_right

    
    

Note:
We repeat step no. 4 as many times depending on how many images we are providing inside carousel slider and step 3 exactly twice to display two sections in Bootstrap card with image slider .carousel

Example 1: Let us implement the above approach and create a Bootstrap card using HTML, CSS, Js with image slider first and then move further in next example to add multiple rows and multiple columns.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <!--Add pre compiled library files -->
    <!--Automatics css and js adder-->
    <!--auto compiled css & Js-->
    <script type="text/javascript" 
            src="//code.jquery.com/jquery-1.9.1.js">
  </script>
    <link rel="stylesheet" 
          type="text/css" 
          href="/css/result-light.css">
    <script type="text/javascript" 
            src=
  </script>
    <link rel="stylesheet" 
          type="text/css" 
          href=
    <link rel="stylesheet" 
          type="text/css" 
          href=
  
</head>
  
<body>
    <!-- create a bootstrap card in a container-->
    <div class="container">
        <!--Bootstrap card with slider class-->
        <div id="carousel-demo" 
             class="carousel slide" 
             data-ride="carousel">
            <div class="carousel-inner">
                <div class="item">
                    <img src=
                </div>
                <div class="item">
                    <img src=
                </div>
                <div class="item active">
                    <img src=
                </div>
            </div>
            <!--slider control for card-->
            <a class="left carousel-control"
               href="#carousel-demo"
               data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left">
              </span>
            </a>
            <a class="right carousel-control" 
               href="#carousel-demo" 
               data-slide="next">
                <span class="glyphicon glyphicon-chevron-right">
              </span>
            </a>
        </div>
    </div>
</body>
  
</html>

chevron_right


Output:

Example 2: Now we extend the implementation of example 1 to show multiple images in a Bootstrap Carousel all at once with the slider at ends.
Below is the implementation of a styled HTML code fragment.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <!--auto compiled css & Js-->
    <script type="text/javascript"
            src="//code.jquery.com/jquery-1.9.1.js">
  </script>
    <link rel="stylesheet" 
          type="text/css" 
          href="/css/result-light.css">
    
    <script type="text/javascript" 
            src=
  </script>
    <link rel="stylesheet" 
          type="text/css" 
          href=
    <link rel="stylesheet"
          type="text/css" 
          href=
    <!-- JavaScript for adding 
     slider for multiple images
     shown at once-->
    <script type="text/javascript">
        $(window).load(function() {
            $(".carousel .item").each(function() {
                var i = $(this).next();
                i.length || (i = $(this).siblings(":first")),
                  i.children(":first-child").clone().appendTo($(this));
                
                for (var n = 0; n < 4; n++)(i = i.next()).length ||
                  (i = $(this).siblings(":first")),
                  i.children(":first-child").clone().appendTo($(this))
            })
        });
    </script>
  
</head>
  
<body>
    <!-- container class for bootstrap card-->
    <div class="container">
        <!-- bootstrap card with row name myCarousel as row 1-->
        <div class="carousel slide" id="myCarousel">
            <div class="carousel-inner">
                <div class="item active">
                    <div class="col-xs-2">
                        <a href="#">
                          <img src=
                               class="img-responsive">
                      </a>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xs-2">
                        <a href="#">
                          <img src=
                               class="img-responsive">
                      </a>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xs-2">
                        <a href="#">
                          <img src=
                               class="img-responsive">
                      </a>
                    </div>
                </div>
            </div> <a class="left carousel-control"
                      href="#myCarousel"
                      data-slide="prev">
          <i class="glyphicon glyphicon-chevron-left">
          </i>
          </a>
            <a class="right carousel-control" 
               href="#myCarousel" 
               data-slide="next">
              <i class="glyphicon glyphicon-chevron-right">
              </i>
          </a>
  
        </div>
    </div>
</body>
  
</html>

chevron_right


Output:

Example 3: Now we create a Bootstrap card with multiple images stacked in rows & columns using a slider.
We display multiple posts each in a bootstrap carousel, that is we display multiple images using the matrix table.
Below is the implementation of a styled HTML code fragment.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <!-- auto compiled css and js library files-->
    <script type="text/javascript" 
            src="//code.jquery.com/jquery-1.9.1.js">
  </script>
    <link rel="stylesheet" 
          type="text/css" 
          href="/css/result-light.css">
    <script type="text/javascript" 
            src=
  </script>
    <link rel="stylesheet" 
          type="text/css" 
          href=
    
    <link rel="stylesheet" 
          type="text/css" 
          href=
    <script type="text/javascript">
        <!-- JavaScript to slide images horizontally-->
        $(window).load(function() {
            $(".carousel .item").each(function() {
                var i = $(this).next();
                i.length || (i = $(this).siblings(":first")),
                  i.children(":first-child").clone().appendTo($(this));
                
                for (var n = 0; n < 4; n++)(i = i.next()).length || 
                  (i = $(this).siblings(":first")), 
                  i.children(":first-child").clone().appendTo($(this))
            })
        });
    </script>
  
</head>
  
<body>
    <!--container class-->
    <div class="container">
        <!-- myCarousel as row 1 in bootstrap card named container-->
        <div class="carousel slide" id="myCarousel">
            <div class="carousel-inner">
                <div class="item active">
                    <div class="col-xs-2">
                        <a href="#">
                          <img src=
                               class="img-responsive">
                      </a>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xs-2">
                        <a href="#">
                         <img src=
                              class="img-responsive">
                      </a>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xs-2">
                        <a href="#">
                          <img src=
                               class="img-responsive">
                      </a>
                    </div>
                </div>
            </div>
            <!-- row 1 of bootstrap card control-->
            <a class="left carousel-control" 
               href="#myCarousel" 
               data-slide="prev">
                
              <i class="glyphicon glyphicon-chevron-left">
              </i>
          </a>
            <a class="right carousel-control" 
               href="#myCarousel" 
               data-slide="next">
              <i class="glyphicon glyphicon-chevron-right">
              </i>
          </a>
  
        </div>
        <!-- myCarousel as row 2 of 
             bootstrap card named container-->
        <div class="carousel slide" id="myCarousel2">
            <div class="carousel-inner">
                <div class="item active">
                    <div class="col-xs-2">
                        <a href="#">
                          <img src=
                               class="img-responsive">
                      </a>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xs-2">
                        <a href="#">
                          <img src=
                               class="img-responsive"></a>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xs-2">
                        <a href="#">
                          <img src=
                               class="img-responsive">
                      </a>
                    </div>
                </div>
            </div>
            <!-- myCarousel2, control of row
                 2 of container class bootstrap card-->
            <a class="left carousel-control" 
               href="#myCarousel2" 
               data-slide="prev">
              <i class="glyphicon glyphicon-chevron-left">
              </i>
          </a>
            <a class="right carousel-control"
               href="#myCarousel2"
               data-slide="next">
              <i class="glyphicon glyphicon-chevron-right">
              </i>
          </a>
  
        </div>
  
    </div>
</body>
  
</html>

chevron_right


Output:




My Personal Notes arrow_drop_up

I am computer expert and work as content creator and Educator as a freelancer

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.