Bootstrap Carousel

April 28th, 2020

Prerana Kasar

Bootstrap Media Objects

Bootstrap Carousel is a cyclic presentation of the media object (like image and video). The class .carousel and .slide is used to create the carousel.

The class .carousel is used to define the contains of carousel and class .slide is used to add on the CSS animation effects. The class .carousel-indicator specify the sequence of the list items. And other some attribute value a carousel is created and worked properly.

Example: 1 Bootstrap Carousel Example

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Media Objects Example</title>
    <!-- link the bootstrap online or through CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
  	</script>
     
</head>
<body>
	<div class="container">
		<h2>Bootstrap Carousel Example</h2>
		<div class="carousel slide" id="mycarousel" data-ride="carousel">
			<ol class="carousel-indicators">
				<li data-target="#mycarousel" data-slide="0" class="active"></li>
				<li data-target="#mycarousel" data-slide="1"></li>
				<li data-target="#mycarousel" data-slide="2"></li>
			</ol>
			<div class="carousel-inner">
				<div class="item active">
					<img src="Img/banner.jpg" style="width: 100%">
				</div>
				<div class="item">
					<img src="Img/banner2.jpg" style="width: 100%">
				</div>
				<div class="item">
					<img src="Img/banner3.jpg" style="width: 100%">
				</div>
				<a class="left carousel-control" href="#mycarousel" data-slide="prev">
					 <span class="glyphicon glyphicon-chevron-left"></span>
     				 <span class="sr-only">Previous</span>
				</a>
				<a class="right carousel-control" href="#mycarousel" data-slide="next">
					 <span class="glyphicon glyphicon-chevron-right"></span>
      				 <span class="sr-only">Previous</span>
				</a>
			</div>
		</div>
	</div>
</body>
</html>

On the above code have three different images which are wraped in the carousel container. And these three image are changed automatically.

Bootstrap Carousel With Caption

To add the caption of image the class .carousel-caption is applied to the container tag inside the text tag.

Example: 2 Bootstrap Carousel Example

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Carousel Example</title>
    <!-- link the bootstrap online or through CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
  	</script>
     
</head>
<body>
	<div class="container">
		<h2>Bootstrap Carousel Example</h2>
		<div class="carousel slide" id="mycarousel" data-ride="carousel">
			<ol class="carousel-indicators">
				<li data-target="#mycarousel" data-slide="0" class="active"></li>
				<li data-target="#mycarousel" data-slide="1"></li>
				<li data-target="#mycarousel" data-slide="2"></li>
			</ol>
			<div class="carousel-inner">
				<div class="item active">
					<img src="Img/banner.jpg" style="width: 100%">
					<div class="carousel-caption">
						<h3>Carousel Heading</h3>
						<p>About Carousel</p>
					</div>
				</div>
				<div class="item">
					<img src="Img/banner2.jpg" style="width: 100%">
					<div class="carousel-caption">
						<h3>Carousel Heading</h3>
						<p>About Carousel</p>
					</div>
				</div>
				<div class="item">
					<img src="Img/banner3.jpg" style="width: 100%">
					<div class="carousel-caption">
						<h3>Carousel Heading</h3>
						<p>About Carousel</p>
					</div>
				</div>
				<a class="left carousel-control" href="#mycarousel" data-slide="prev">
					 <span class="glyphicon glyphicon-chevron-left"></span>
     				 <span class="sr-only">Previous</span>
				</a>
				<a class="right carousel-control" href="#mycarousel" data-slide="next">
					 <span class="glyphicon glyphicon-chevron-right"></span>
      				 <span class="sr-only">Next</span>
				</a>
			</div>
		</div>
	</div>
</body>
</html>

On the above code have three different images which are wraped in the carousel container. And these three image are changed automatically.

Here the carousel-caption class is used to addon the caption to the images.