In this we will discuss creating a multi column bootstrap carousel.
Bootstrap tutorial for beginners
The carousel has 3 slides and each slide has 3 columns with one image in each column. The carousel moves from the images in one slide to another.
Here is the code used in the demo
Bootstrap tutorial for beginners
The carousel has 3 slides and each slide has 3 columns with one image in each column. The carousel moves from the images in one slide to another.
Here is the code used in the demo
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap tutorial for begineers</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="CustomStyles.css" rel="stylesheet" />
</head>
<body>
<br />
<div class="container">
<div class="row">
<div class="col-xs-12">
<div id="imageCarousel" class="carousel slide" data-interval="2000"
data-ride="carousel" data-pause="hover" data-wrap="true">
<ol class="carousel-indicators">
<li data-target="#imageCarousel" data-slide-to="0" class="active"></li>
<li data-target="#imageCarousel" data-slide-to="1"></li>
<li data-target="#imageCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-xs-4">
<img src="Images/Desert.jpg" class="img-responsive">
<div class="carousel-caption">
<h3>Desert</h3>
<p>Desert Image Description</p>
</div>
</div>
<div class="col-xs-4">
<img src="Images/Jellyfish.jpg" class="img-responsive">
<div class="carousel-caption">
<h3>Jellyfish</h3>
<p>Jellyfish Image Description</p>
</div>
</div>
<div class="col-xs-4">
<img src="Images/Penguins.jpg" class="img-responsive">
<div class="carousel-caption">
<h3>Penguins</h3>
<p>Penguins Image Description</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-4">
<img src="Images/Lighthouse.jpg" class="img-responsive">
<div class="carousel-caption">
<h3>Lighthouse</h3>
<p>Lighthouse Image Description</p>
</div>
</div>
<div class="col-xs-4">
<img src="Images/Hydrangeas.jpg" class="img-responsive">
<div class="carousel-caption">
<h3>Hydrangeas</h3>
<p>Hydrangeas Image Description</p>
</div>
</div>
<div class="col-xs-4">
<img src="Images/Koala.jpg" class="img-responsive">
<div class="carousel-caption">
<h3>Koala</h3>
<p>Koala Image Description</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-4">
<img src="Images/tulips.jpg" class="img-responsive">
<div class="carousel-caption">
<h3>Tulips</h3>
<p>Tulips Image Description</p>
</div>
</div>
<div class="col-xs-4">
<img src="Images/Chrysanthemum.jpg" class="img-responsive">
<div class="carousel-caption">
<h3>Chrysanthemum</h3>
<p>Chrysanthemum Image Description</p>
</div>
</div>
<div class="col-xs-4">
<img src="Images/stripes.jpg" class="img-responsive">
<div class="carousel-caption">
<h3>Stripes</h3>
<p>Stripes Image Description</p>
</div>
</div>
</div>
</div>
</div>
<a href="#imageCarousel" class="carousel-control left" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#imageCarousel" class="carousel-control right" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
