Include that awesome slideshow you always needed in your website. Easier and more flexible than ever!

Carousel responsive

Example

<div id="myCarousel-1" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel-1" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel-1" data-slide-to="1" class=""></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="images/slider-1.jpg" alt="">
    </div>
    <div class="item">
      <img src="images/slider-2.jpg" alt="">
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#myCarousel-1" data-slide="prev"></a>
  <a class="right carousel-control" href="#myCarousel-1" data-slide="next"></a>
</div>

Optional captions

Add captions to your slides easily with the .carousel-caption element within any .item. Place just about any optional HTML within there and it will be automatically aligned and formatted.

Create beautiful
full-width slideshows!

Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh
ultricies vehicula ut id elit.

Learn more

Add video content

Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Donec id elit non mi porta gravida at eget metus. Nullam id dolor
ultricies vehicula ut id elit.

Responsive Design

Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh
ultricies vehicula ut id elit.

View code

<div id="myCarousel-2" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel-1" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel-1" data-slide-to="1" class=""></li>
    <li data-target="#myCarousel-1" data-slide-to="2" class=""></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="active item">
	  <div style="background:url(demoimages/home-slider-1.jpg) 50% 0 no-repeat; height:380px;">
	    <div class="container"> <!-- optional, use .container to center caption on the page -->
    	  <div class="row">
            <div class="col-md-6 carousel-caption">
              <h1>Create beautiful<br/>full-width slideshows!</h1>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.<br>
              Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh<br>
              ultricies vehicula ut id elit.<br/><br/>
              <a class="btn btn-inverse">Learn more</a></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="container"> <!-- optional, use .container to center caption on the page -->
        <div class="row">
          <div class="col-md-6 carousel-caption">
            <h1>Add video content</h1>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.<br>
            Donec id elit non mi porta gravida at eget metus. Nullam id dolor<br>
            ultricies vehicula ut id elit.<br/><br/>
            <a class="btn btn-inverse">Learn more</a></p>
          </div>
          <div class="col-md-6" style="padding:20px 0; text-align:center;">
            <div class="img img-polaroid" style="display:inline-block;">
              <iframe width="425" height="250" src="http://www.youtube.com/embed/zATo1YEkZYo" frameborder="0" allowfullscreen></iframe>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="container carousel-caption" style="text-align:center;"> <!-- optional, use .container to center caption on the page -->
        <h1>Responsive Design</h1>
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.<br>
        Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh<br>
        ultricies vehicula ut id elit.</p>
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="carousel-control left" href="#myCarousel-2" data-slide="prev"></a>
  <a class="carousel-control right" href="#myCarousel-2" data-slide="next"></a>
</div>

Other settings

Optionally you can have more control over the carousel. If necessary, edit the theme's layout files and change the call to the carousel script on the bottom of the file, as in the following example:

$('.carousel').carousel({
	interval: 5000, // Delay between slides. If false, carousel will not automatically cycle.
	pause: 'hover' // Pauses the cycling of the carousel on mouse over.
});

CMS-specific instructions

If you need further details on how to add a slider to your specific CMS, please visit our Knowledge Base for detailed articles.

Transition animations not supported in Internet Explorer 8 & 9

Carousel exclusively uses CSS3 for its animations, but Internet Explorer 8 & 9 don't support the necessary CSS properties. Thus, there are no slide transition animations when using these browsers. We have intentionally decided not to include jQuery-based fallbacks for the transitions.

Accessibility issue

The carousel component is generally not compliant with accessibility standards. If you need to be compliant, please consider other options for presenting your content.

Sliders