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>

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...
});