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 engineer and work as content creator for various sites as 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.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.