How to display bootstrap carousel with three post in each slide?
A Bootstrap Carousel is a slideshow for rotating through a 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 a huge amount of content 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
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> |
2. Apply CSS to resize the .carousel Bootstrap card body by using the code segment below.
HTML
<style> .carousel { width:200px; height:200px; }</style> |
3. In the body section create a division class with carousel slider using the syntax below
HTML
<div id="carousel-demo" class="carousel slide" data-ride="carousel"></div> |
4. In this step, the sliding images are defined in the division tag as under.
HTML
<div class="carousel-inner"> <div class="item"> <img src="..URL of image"></div></div> |
5. The last step is to add controls to slide images using the carousel-control class as below.
HTML
<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 the 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 an image slider first and then move further in the next example to add multiple rows and multiple columns.
HTML
<!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 the ends. Below is the implementation of a styled HTML code fragment.
HTML
<!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.
HTML
<!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:
Please Login to comment...