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:
- Include Bootstrap Javascript, CSS and JQuery Library files in the head sections, that are pre-loaded and pre-compiled
<linkrel="stylesheet"href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”> - 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
<divid=”carousel-demo” class=”carousel slide” data-ride=”carousel”> - In this step, the sliding images are defined in the division tag as under.
<divclass=”carousel-inner”><divclass=”item”><imgsrc=”..URL of image”> - Last step is to add controls to slide images using the carousel-control class as below.
<aclass="left carousel-control"href="#carousel-demo2"data-slide="prev"><spanclass="icon-prev"></span></a><aclass="right carousel-control"href="#carousel-demo2"data-slide="next"><spanclass="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= </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> |
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= </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> |
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= </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> |
Output:
