WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Bootstrap Carousel Plugin


In this tutorial we discuss BS Carousel Plugin

The Carousel Plugin

The Carousel plugin is a component for cycling through elements,Carousel can be also work like slideshow.


Carousel Example




How To Create a Carousel

The following example shows how to create a basic carousel:

Example

<div id="myCarousel" class="carousel slide" data-ride="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>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="welookups-photo-1120162.jpeg" alt="welookups-photo-1120162">
    </div>

    <div class="item">
      <img src="welookups-photo-342520.jpeg" alt="welookups-photo-342520">
    </div>

    <div class="item">
      <img src="welookups-photo-167480.jpeg" alt="welookups-photo-167480">
    </div>

    <div class="item">
      <img src="welookups-photo-167385.jpeg" alt="welookups-photo-167385">
    </div>
  </div>

  <!-- Left and right controls -->
  <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>
Try it Yourself »

Example Explained

The outermost <div>:

Carousels require the use of an id Where id="myCarousel" for carousel controls to function properly.

The class="carousel" specifies that this <div> contains a carousel.

The .slide class adds a CSS transition and animation effect, which makes the items slide when showing a new item. Omit this class if you do not want this effect.

The data-ride="carousel" attribute tells Bootstrap to begin animating the carousel immediately when the page loads.

The "Indicators" part:

The indicators are the little dots at the bottom of each slide this is state of how many slides there is in the carousel and which slide the user are currently view.

The indicators are specified 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 you can go.


Add Captions to Slides

Add <div class="carousel-caption"> within each <div class="item"> to create a caption for each slide:

Example

<div id="myCarousel" class="carousel slide" data-ride="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>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="welookups-photo-1120162.jpeg" alt="welookups-photo-1120162">
    </div>

    <div class="item">
      <img src="welookups-photo-342520.jpeg" alt="welookups-photo-342520">
    </div>

    <div class="item">
      <img src="welookups-photo-167480.jpeg" alt="welookups-photo-167480">
    </div>

    <div class="item">
      <img src="welookups-photo-167385.jpeg" alt="welookups-photo-167385">
    </div>
  </div>

  <!-- Left and right controls -->
  <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>
Try it Yourself »