Bootstrap Carousel एक Flexible, Responsive Path है. इसका उपयोग Slider को अपने Web Page पर Add करने के लिए किया जाता है. यह बहुत ही Responsive और Flexible है. इससे आप Images, Iframes, Videos अन्य किसी प्रकार के सामग्री को भी Add कर सकते है.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Carousel Example</title>
<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.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 80%;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<h1>Bootstrap Carousel Example</h1>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active">
</li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="carousel.jpg" alt="Carousel 1" >
</div>
<div class="item">
<img src="carouse2.jpg" alt="Carousel 2" >
</div>
<div class="item">
<img src="carouse3.jpg" alt="Carousel 3" >
</div>
</div>
<a class="left carousel-control" href="#myCarousel"
role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
Bootstrap मे Slider के साथ Caption का उपयोग Caption के साथ Content को Slide करने के लिए किया जाता है. इसके लिये आपको प्रत्येक <div class = "item"> के भीतर .carousel-caption class शामिल करना होता है.
<!DOCTYPE html>
<html>
<head>
<title>Carousel Example Add Captions to Slides</title>
<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.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 80%;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<h1>Carousel Example</h1>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/carousel.jpg" alt="Carousel 1" >
<h3>Bootstrap Tutorial</h3>
<p>Read Bootstrap Tutorial at Tutorialsroot.</p>
</div>
<div class="item">
<img src="images/carousel.jpg" alt="Carousel 2" >
<h3>Bootstrap Tutorial</h3>
<p>Read Bootstrap Tutorial at Tutorialsroot.</p>
</div>
<div class="item">
<img src="images/carousel.jpg" alt="Carousel 3" >
<h3>Bootstrap Tutorial</h3>
<p>Read Bootstrap Tutorial at Tutorialsroot.</p>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>