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

16 Jul, 2019
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:
Include Bootstrap Javascript, CSS and JQuery Library files in the head sections, that are pre-loaded and pre-compiled<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">Apply CSS to resize the .carousel Bootstrap card body by using the code segment below.<style> .carousel { width:200px; height:200px; } <style>In the body section create a division class with carousel slider using the syntax below<div id=”carousel-demo” class=”carousel slide” data-ride=”carousel”>In this step, the sliding images are defined in the division tag as under.<div class=”carousel-inner”><div class=”item”><img src=”..URL of image”>Last step is to add controls to slide images using the carousel-control class as below.<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>
Include Bootstrap Javascript, CSS and JQuery Library files in the head sections, that are pre-loaded and pre-compiled<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">
<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">
Apply CSS to resize the .carousel Bootstrap card body by using the code segment below.<style> .carousel { width:200px; height:200px; } <style>
<style> .carousel { width:200px; height:200px; } <style>
In the body section create a division class with carousel slider using the syntax below<div id=”carousel-demo” class=”carousel slide” data-ride=”carousel”>
<div id=”carousel-demo” class=”carousel slide” data-ride=”carousel”>
In this step, the sliding images are defined in the division tag as under.<div class=”carousel-inner”><div class=”item”><img src=”..URL of image”>
<div class=”carousel-inner”><div class=”item”><img src=”..URL of image”>
Last step is to add controls to slide images using the carousel-control class as below.<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>
<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>
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.
<!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>
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.
<!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>
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.
<!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>
Output:
Bootstrap-Misc
Picked
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to pass data into a bootstrap modal?
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
Difference between Bootstrap 4 and Bootstrap 5
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?