Suggested Video Tutorials
Part 49 - Bootstrap scrollspy vertical menu
Part 50 - Bootstrap affix plugin
Part 51 - Bootstrap image carousel
In this video we will discuss creating a multi column bootstrap carousel.
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
Part 49 - Bootstrap scrollspy vertical menu
Part 50 - Bootstrap affix plugin
Part 51 - Bootstrap image carousel
In this video we will discuss creating a multi column bootstrap carousel.
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>
hi CustomStyles.css? where do u find CustomStyles.css?
ReplyDeletehere i want one image to slide at a time .
ReplyDeletenot like 3image set at once ....any suggesion?
Thank you for your awesome tutorials! I've just discovered them, and as a self-taught developer, I really love your presentation. Clear. Easy to follow. Ordered. I wish I'd encountered your material when I first started using BS coz it would have saved me quite a bit of frustration :) Thanks a million!
ReplyDelete