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”>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js">

    chevron_right

    

    

    
                        filter_none
    

    

    

    

    

    2. 

  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
    

    

    

    
                        filter_none
    

    

    

    

    

    3. 

  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
    

    

    

    
                        filter_none
    

    

    

    

    

    4. 

  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
    

    

    

    
                        filter_none
    

    

    

    

    5. 

  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
    

    

    

    
                        filter_none
    

    

    

    

    

    6. 



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= 


"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> 


  </script> 


    <link rel="stylesheet" 


          type="text/css" 


          href= 


"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 


    <link rel="stylesheet" 


          type="text/css" 


          href= 


"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 


  


</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= 


"https://media.geeksforgeeks.org/wp-content/uploads/20190709143850/1382.png"> 


                </div> 


                <div class="item"> 


                    <img src= 


"https://media.geeksforgeeks.org/wp-content/uploads/20190709143855/223-1.png"> 


                </div> 


                <div class="item active"> 


                    <img src= 


"https://media.geeksforgeeks.org/wp-content/uploads/20190709143904/391.png"> 


                </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







                        filter_none








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= 


"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> 


  </script> 


    <link rel="stylesheet" 


          type="text/css" 


          href= 


"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 


    <link rel="stylesheet"


          type="text/css" 


          href= 


"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 


    <!-- 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= 


"https://media.geeksforgeeks.org/wp-content/uploads/20190709143904/391.png" 


                               class="img-responsive"> 


                      </a> 


                    </div> 


                </div> 


                <div class="item"> 


                    <div class="col-xs-2"> 


                        <a href="#"> 


                          <img src= 


"https://media.geeksforgeeks.org/wp-content/uploads/20190709143850/1382.png" 


                               class="img-responsive"> 


                      </a> 


                    </div> 


                </div> 


                <div class="item"> 


                    <div class="col-xs-2"> 


                        <a href="#"> 


                          <img src= 


"https://media.geeksforgeeks.org/wp-content/uploads/20190709143855/223-1.png" 


                               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







                        filter_none








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= 


"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> 


  </script> 


    <link rel="stylesheet" 


          type="text/css" 


          href= 


"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 


    


    <link rel="stylesheet" 


          type="text/css" 


          href= 


"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 


    <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= 


"https://media.geeksforgeeks.org/wp-content/uploads/20190709143855/223-1.png" 


                               class="img-responsive"> 


                      </a> 


                    </div> 


                </div> 


                <div class="item"> 


                    <div class="col-xs-2"> 


                        <a href="#"> 


                         <img src= 


"https://media.geeksforgeeks.org/wp-content/uploads/20190709143904/391.png" 


                              class="img-responsive"> 


                      </a> 


                    </div> 


                </div> 


                <div class="item"> 


                    <div class="col-xs-2"> 


                        <a href="#"> 


                          <img src= 


"https://media.geeksforgeeks.org/wp-content/uploads/20190709143910/457.png" 


                               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= 


"https://media.geeksforgeeks.org/wp-content/uploads/20190709143910/457.png" 


                               class="img-responsive"> 


                      </a> 


                    </div> 


                </div> 


                <div class="item"> 


                    <div class="col-xs-2"> 


                        <a href="#"> 


                          <img src= 


"https://media.geeksforgeeks.org/wp-content/uploads/20190709143904/391.png" 


                               class="img-responsive"></a> 


                    </div> 


                </div> 


                <div class="item"> 


                    <div class="col-xs-2"> 


                        <a href="#"> 


                          <img src= 


"https://media.geeksforgeeks.org/wp-content/uploads/20190709143850/1382.png" 


                               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







                        filter_none








Output:







    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
Pritesh Ranjan 1
Check out this Author's contributed articles.
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.