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>
<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>
<div class="container">
<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>
<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>
<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">
$(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>
<div class="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> <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>
<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">
$(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>
<div class="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>
<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 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>
<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:
