Carousel

The carousel is a way to show the large amount of the content within a small space on the web pages. It is also known as slideshow. It is a dynamic presentation of the contents.

Carousel Outer <div> description is following:

• Carousels controls function properly with the help of an id. In this example id is MyCarousel (id="myCarousel").
• The class="carousel" represents that this <div> contains a carousel.
• The .slide class is used to add a CSS transition and animation effect, which makes the items slide when showing a new item.
• The data-ride="carousel" attribute tells Bootstrap to begin animating the carousel immediately when the page loads.

Indicators description is following:

• You can see the little dots at the bottom of each slide. These indicators show that how many slides are in the carousel, and which one is current viewing.  
• The indicators are represents in an ordered list with class .carousel-indicators.
• The data-target attribute points to the id of the carousel.
• The data-slide-to attribute specifies which slide to go to, when clicking on the specific dot.

Wrapper part description is following:

• The slides are represents in a <div> with class .carousel-inner.
• The content of each slide is defined in a <div> with class .item. This can be text or images.
• The .active class needs to be added to one of the slides. Otherwise, the carousel will not be visible.

The "Left and right controls" description is following

• This code adds "left" and "right" buttons that allows the user to go back and forth between the slides manually.
• The data-slide attribute accepts the keywords "prev" or "next", which alters the slide position relative to its current position.
• Add <div class="carousel-caption"> within each <div class="item"> to create a caption for each slide:

Example of Code

<!-- Carousel Outer Div -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Carousel indicators -->
  <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>
  <!-- Wrapper for carousel items -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="http://schools.inimisttech.com/upload/blogs/15501493511549346156product.png" alt="First Slide">
    </div>
    <div class="item">
      <img src="http://schools.inimisttech.com/upload/blogs/15501493511549346156product.png" alt="Second Slide">
    </div>
    <div class="item">
      <img src="http://schools.inimisttech.com/upload/blogs/15501493511549346156product.png" alt="Third Slide">
    </div>
  </div>
  <!-- Carousel controls -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

Output