Carousel Examples

Examples of the rotating image carousel module in action. Sample code provided!

To use any of the following examples be sure to include carousel.css (required styles for basic use) and carousel-style.css (styles for common use cases).

Most of the examples on this page can be used immediately without any additional styles.

Previous / Next controls

Carousel with Previous / Next controls to advance between items.

Code for this example:

<div class="m-carousel m-fluid m-carousel-photos">
  <div class="m-carousel-inner">
    <div class="m-item">
        <img src="image1.jpg">
    </div>
    <div class="m-item">
        <img src="image2.jpg">
    </div>
    <div class="m-item">
        <img src="image3.jpg">
    </div>
  </div>
  <div class="m-carousel-controls">
    <a href="#" data-slide="prev">&lsaquo; Previous</a>
    <a href="#" data-slide="next">Next &rsaquo;</a>
  </div>
</div>

Bulleted controls

Bulleted indicators for number of items and currently-selected item. Click to advance between items.

Code for this example:

<div class="m-carousel m-fluid m-carousel-photos">
  <div class="m-carousel-inner">
    <div class="m-item">
      <img src="image1.jpg">
    </div>
    <div class="m-item">
      <img src="image2.jpg">
    </div>
    <div class="m-item">
      <img src="image3.jpg">
    </div>
  </div>
  <div class="m-carousel-controls m-carousel-bulleted">
    <a href="#" data-slide="1">1</a>
    <a href="#" data-slide="2">2</a>
    <a href="#" data-slide="3">3</a>
  </div>
</div>

Numbered pagination-style controls

Numbered pagination controls for each item, with flanking Previous / Next controls.

Code for this example:

<div class="m-carousel m-fluid m-carousel-photos">
  <div class="m-carousel-inner">
    <div class="m-item">
      <img src="image1.jpg">
    </div>
    <div class="m-item">
      <img src="image2.jpg">
    </div>
    <div class="m-item">
      <img src="image3.jpg">
    </div>
  </div>
  <div class="m-carousel-controls m-carousel-pagination">
    <a href="#" data-slide="prev">Previous</a>
    <a href="#" data-slide="1">1</a>
    <a href="#" data-slide="2">2</a>
    <a href="#" data-slide="3">3</a>
    <a href="#" data-slide="next">Next</a>
  </div>
</div>

HUD-style Controls

Previous and Next render as heads-up controls that display on hover events. Since hover events don't work on mobile, simply swipe to advance.

Code for this example:

<div class="m-carousel m-fluid m-carousel-photos">
  <div class="m-carousel-inner">
    <div class="m-item">
      <img src="image1">
    </div>
    <div class="m-item">
      <img src="image2">
    </div>
    <div class="m-item">
      <img src="image3">
    </div>
  </div>
  <div class="m-carousel-controls m-carousel-hud">
    <a class="m-carousel-prev" href="#" data-slide="prev">Previous</a>
    <a class="m-carousel-next" href="#" data-slide="next">Next</a>
  </div>
</div>

Image + Caption

Image carousel containing textual captions with simple Previous / Next controls to advance between items.

Code for this example:

<div class="m-carousel m-fluid m-carousel-photos">
  <div class="m-carousel-inner">
    <div class="m-item">
      <img src="image1.jpg">
      <p class="m-caption">Caption #1</p>
    </div>
    <div class="m-item">
      <img src="image2.jpg">
      <p class="m-caption">Caption #2</p>
    </div>
    <div class="m-item">
      <img src="image3.jpg">
      <p class="m-caption">Caption #3</p>
    </div>
  </div>

Fixed Width Items

Items can be stretched to fit the viewport, or they can be sized individually like in this example. In this example, we've used the included .m-card-light class to give the element a background and border. You will have to to size the element or it's content yourself.

Code for this example:

<div class="m-carousel m-center m-fade-out">
  <div class="m-carousel-inner">
    <div class="m-item">
      <div class="m-card-light">
        <img src="image1.jpg">
        <p class="m-caption">Caption #1</p>
      </div>
    </div>
    <div class="m-item">
      <div class="m-card-light">
        <img src="image2.jpg">
        <p class="m-caption">Caption #2</p>
      </div>
    </div>
    <div class="m-item">
      <div class="m-card-light">
        <img src="image3.jpg">
        <p class="m-caption">Caption #3</p>
      </div>
    </div>
  </div>

Scaled Transitions

Display the current item larger than the rest, and animate the transition between each with the .m-scaled class.

Code for this example:

<div class="m-carousel m-center m-scaled m-fade-out">
  <div class="m-carousel-inner">
    <div class="m-item">
      <div class="m-card-light">
        <img src="image1.jpg">
        <p class="m-caption">Caption #1</p>
      </div>
    </div>
    <div class="m-item">
      <div class="m-card-light">
        <img src="image2.jpg">
        <p class="m-caption">Caption #2</p>
      </div>
    </div>
    <div class="m-item">
      <div class="m-card-light">
        <img src="image3.jpg">
        <p class="m-caption">Caption #3</p>
      </div>
    </div>
  </div>

Arbitrary Content

Arbitrary content carousel with simple Previous / Next controls to advance between items. We used the included class .m-card-dark to give each element a background. These elements are automatically sized by the .m-fluid class to be full width.

Code for this example:

<div class="m-carousel m-fluid">
  <div class="m-carousel-inner">
    <div class="m-item">
      <div class="m-card-dark">
        <h3>Heading 1</h3>
        <p>Slide content 1</p>
      </div>
    </div>
    <div class="m-item">
      <div class="m-card-dark">
        <h3>Heading 2</h3>
        <p>Slide content 2</p>
      </div>
    </div>
  </div>