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