Bootstrap 3

Create Carousel

The Carousel plugin is used to create a slideshow or image gallery that can be cycled through ("showcase") to show a large amount of images with or without captions in a user friendly interface. It has three main components:

the slides (carousel items)
the indicators (small dots)
the controls (previous and next arrows)

View Demo

Create a new file in the site root directory with the Bootstrap framework and save it (e.g., carousel.html)

TIP: Use an existing page that has the Bootstrap framework and delete the content between the <body> opening and closing tags.

Write the following <script> tag above the closing </html> tag to position and format the carousel elements, etc.

<style>
.carousel-inner > .item > img, 
.carousel-inner > .item > a > img {
  width: 90%;
  margin: auto; 
  }
.carousel-caption {background-color:rgba(0,0,0,0.50);
 color:white;  
 border-radius:10px; margin-bottom:10px;}
.carousel-caption h3 {color:white;}
</style>
</html>

Below the opening <body> tag, write the following HTML code to create the carousel items, indicators and controls:

<body>
<div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
<!-- Container for Carousel items -->
<div class="carousel-inner">
	<div class="item active">
	<img src="images/flowers/african_violets.jpg" alt="African Violets">
		<div class="carousel-caption">
			<h3>AFRICAN VIOLETS</h3>
			<p>African Violets info goes here...</p>
		</div>
	</div>
	<div class="item">
	<img src="images/flowers/Bird_Of_Paradise.jpg" alt="Bird of Paradise">
		<div class="carousel-caption">
			<h3>BIRD OF PARADISE</h3>
			<p>Bird of Paradise  info goes here...</p>
		</div>
	</div>
	<div class="item">
	<img src="images/flowers/sun_flowers.jpg" alt="Sun Flowers">
		<div class="carousel-caption">
			<h3>SUN FLOWERS</h3>
			<p>Sun Flowers info goes here...</p>
		</div>
	</div>
</div>
<!-- Carousel indicator dots -->
<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> 
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
</a>
</div>

CODE EXPLANATION:

The carousel requires and id (e.g., myCarousel) to work properly.
The carousel class specifies that this <div> contains a carousel.
The slide class adds a CSS transition and animation effect. If not used, slides will be seen without transition and animation.
The data-ride="carousel" attribute is used to start the carousel when the page loads.
The data-target class reference the id of the carousel.
The item class is used to hold the content (text and image) of a given slide.
The data-interval attribute is used to specifies the time delay between slides.
The data-slide-to attribute is used to move the slide position to a particular slide (e.g. starting with zero) when indicator dot is clicked on.
The data-slide attribute is used to set the "previous" or "next" slide in the list.
The carousel-indicators class is used to indicates how many slides are in the carousel and which slide is currently showing
The carousel-caption class is used to defines the caption for each slide.
The left and right buttons are used to navigate the slide previous and next slide.

CAUTION: It is required to add the class .active to one of the slides; otherwise, the carousel will not work correctly. Because carousels use CSS3 transitions, they are not supported in Internet Explorer 9 or earlier.

CHECK POINT: Save the file and preview it in a browser. You should see that the images changes every three seconds. If you hover the mouse over the carousel, it pauses. if you hover out, it resumes.

There are some additional options that can be set via classes:

Class	Description
data-interval	specifies the amount of time to delay (in milliseconds) between slides. Default is 5000.
data-pause	pauses the the carousel on mouse enter and resumes the the carousel on mouse leave. Default is hover.
data-wrap	specifies whether the carousel should cycle continuously. Default is a boolean set to true.
data-keyboard	specifies whether the carousel should react to keyboard events. Default is a boolean set to true.