Some websites contain an element which traverse through different child elements on button click or automatically. This element is known as carousel. A bootstrap carousal is used to create fully responsive slideshows. There are a couple of ways to include carousel in your websites. Either you have to individually include “carousel.js” file or you have to include full “bootstrap.js” file which contain code for carousel by default. Take a look at the following example to see how bootstrap carousel works.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id = "bsCarousel" class = "carousel slide">
<ol class = "carousel-indicators">
<li data-target = "#bsCarousel" data-slide-to = "0" class = "active"></li>
<li data-target = "#bsCarousel" data-slide-to = "1"></li>
<li data-target = "#bsCarousel" data-slide-to = "2"></li>
</ol>
<div class = "carousel-inner">
<div class = "item active">
<img src="bsimages/car1.jpg" width="1368" height="600" alt = "First Image">
</div>
<div class = "item">
<img src="bsimages/car2.jpg" width="1368" height="600" alt = "Second Image">
</div>
<div class = "item">
<img src ="bsimages/car3.jpg" width="1368" height="600" alt = "Third Image">
</div>
</div>
<a class = "carousel-control left" href = "#bsCarousel" data-slide = "prev">‹</a>
<a class = "carousel-control right" href = "#bsCarousel" data-slide = "next">›</a>
</div>
</body>
</html>
Now pay close attention to the above code. It has been explained line by line as follows:
You can also add captions to each slide within the carousel. To do so, simply add a div with class “carousel-caption” after the item. Next, inside the div add h3 tag and paragraph tag for heading and text purposes. Take a look at the following example.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id = "bsCarousel" class = "carousel slide">
<ol class = "carousel-indicators">
<li data-target = "#bsCarousel" data-slide-to = "0" class = "active"></li>
<li data-target = "#bsCarousel" data-slide-to = "1"></li>
<li data-target = "#bsCarousel" data-slide-to = "2"></li>
</ol>
<div class = "carousel-inner">
<div class = "item active">
<img src="bsimages/car1.jpg" width="1368" height="600" alt = "First Image">
<div class="carousel-caption">
<h3>Nice Car</h3>
<p>This car is extremely pretty.</p>
</div>
</div>
<div class = "item">
<img src="bsimages/car2.jpg" width="1368" height="600" alt = "Second Image">
<div class="carousel-caption">
<h3>Nice Car</h3>
<p>This car is a truck.</p>
</div>
</div>
<div class = "item">
<img src ="bsimages/car3.jpg" width="1368" height="600" alt = "Third Image">
<div class="carousel-caption">
<h3>Nice Car</h3>
<p>This car is old car.</p>
</div>
</div>
</div>
<a class = "carousel-control left" href = "#bsCarousel" data-slide = "prev">‹</a>
<a class = "carousel-control right" href = "#bsCarousel" data-slide = "next">›</a>
</div>
</body>
</html>