Carousel

The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript.

Carousel can have captions, indicators, next/prev buttons.

css class	description
carousel	Defines a carousel element.
carousel-inner	Defines a container for carousel items.
carousel-item	Defines a carousel item.
carousel-caption	Defines a caption for carousel item.
carousel-indicators	Defines a container for indicators. For example, it can be the <ol> html element.
carousel-control-prev	Defines a button for sliding to the previous slide.
carousel-control-next	Defines a button for sliding to the next slide.

<div class="bd-example">
  <div 
  id="carouselExampleCaptions" 
  class="carousel slide bg-dark" 
  style="width:384px; height:384px;"
  data-interval="2000"
  data-ride="carousel">
    
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleCaptions" 
         data-slide-to="0" 
         class="active"></li>
      <li data-target="#carouselExampleCaptions" 
         data-slide-to="1"></li>
      <li data-target="#carouselExampleCaptions" 
         data-slide-to="2"></li>
    </ol>
    
    <div class="carousel-inner">
      
      <div class="carousel-item active">
        <img src="/images/flower_n_1.jpeg"         
             class="d-block w-100" 
             alt="...">
        <div class="carousel-caption 
          d-none d-md-block">
          <h5>First slide label</h5>
          <p>Nulla vitae elit libero, 
          a pharetra augue mollis interdum.</p>
        </div>
      </div>
      
      <div class="carousel-item">
        <img src="/images/flower_n_2.jpg" 
             class="d-block w-100" alt="...">
        <div class="carousel-caption 
          d-none d-md-block">
          <h5>Second slide label</h5>
          <p>Lorem ipsum dolor sit amet, 
          consectetur adipiscing elit.</p>
        </div>
      </div>
      
      <div class="carousel-item">
        <img src="/images/flower_n_3.jpeg" 
             height="384"
             class="d-block w-100" alt="...">
        <div class="carousel-caption 
          d-none d-md-block">
          <h5>Third slide label</h5>
          <p>Praesent commodo cursus magna, 
          vel scelerisque nisl consectetur.</p>
        </div>
      </div>
    </div>
    
    <a class="carousel-control-prev"
        href="#carouselExampleCaptions" 
        role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" 
          aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next"
        href="#carouselExampleCaptions" 
        role="button" data-slide="next">
      <span class="carousel-control-next-icon" 
         aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  
  </div>
</div>

First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

methods

method	description
carousel(opt)	Initializes the carousel with an optional options object and starts cycling through items. Options object can have following properties: interval - the amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. Default value 5000. keyboard - a boolean value, that defines whether the carousel should react to keyboard events. pause - value "hover" pauses the cycling of the carousel on mouse enter event and resumes the cycling of the carousel on mouse leave event. Value false defines that hovering over the carousel won't pause it. wrap - a boolean value, that define whether the carousel should cycle continuously or have hard stops. touch - a boolean value, that defines whether the carousel should support left/right swipe interactions on touchscreen devices. You also can specify options as the HTML atribures data-*, for example the data-interval="2000" attribute.
carousel('cycle')	Cycles through the carousel items from left to right.
carousel('pause')	Stops the carousel from cycling through items.
carousel(toFrameInd)	Cycles the carousel to a particular frame, index is 0 based.
carousel('prev')	Cycles to the previous item.
carousel('next')	Cycles to the next item.
carousel('dispose')	Destroys an element’s carousel.


$('.carousel').carousel({
  interval: 2000
});

events

event	description
slide.bs.carousel	Fires immediately when the slide method is invoked.
slid.bs.carousel	Fires when the carousel has completed its slide transition.

Both events have the following additional properties:

direction - the direction in which the carousel is sliding, either "left" or "right".
relatedTarget - the DOM element that is being slid into place as the active item.
from - the index of the current item.
to - the index of the next item.

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
});

Bootstrap tutorial