Carousel

Carousels allow users to cycle through a series of related content within a single row of space.

Multiple Panel Carousel


When to Use

  • Use to display a sequence of related panels
  • Use when you have limited space
  • Use for smaller sets of content. Larger sets may benefit from the Filmstrip Carousel

When Not to Use

  • When users are likely to want to see and/or compare all content in a single view.

Variations

View all Examples on a demo page

Usage

Placement

  • Multiple Panels and Filmstrip Carousels may appear anywhere on the page, but are most likely to appear at the top of the screen.
  • Hero Banner carousels may only appear at the top of the screen.

Interactions

Carousels may use the following scrolling methods:

  • Incremental: this user-controlled method is best for smaller content sets and/or when users are likely to want to focus on each panel independently.
  • Smooth: this user-controlled method is best for larger and/or infinite data sets and when users are in a more exploratory model and likely to prefer quickly advancing through the content.
  • Automatic: this method is an optional feature that can be applied only to the hero image carousel.

Content inside of carousels can be continuous, allowing it to repeat at the end of the sequence, or it can stop at the end of the sequence.

Examples

View all Examples on a demo page

Filmstrip Carousel

Carousel Panel Title


When to Use

  • Use for large and/or infinite content sets, such as image results

When Not to Use

  • When content would benefit from being displayed in individual panels

Additional Guidelines

  • This variation uses a smooth scrolling method, which allows users to scan quickly through content sets.
  • There should be partial image showing as often as possible to indicate additional content.
  • The height of the outer panel is variable, but the height and width of the content it contains should be consistent throughout the content set.
  • On small through XL screen sizes, the arrows will display for advancing forward and back. For XS screen sizes, the arrows do not appear. In this context, partial images should appear on the left and right to provide a visual affordance of the scrolling behavior.

Hero Banner Carousel


When to Use

  • Use to display a single large image on a landing or marketing-type page

When Not to Use

  • Not recommended for more than 5 images within the set.

Developer Notes

  • Instantiate the component by calling new Spark.Carousel(el) or $(el).sparkCarousel()
  • Any modifications, additions, or removal of items, or configuration option changes requires you to call the change() function on the Carousel instance, this will cause the carousel to reevaluate any sizing and interaction settings
  • The carousel will respond to focus events by scrolling to the .spark-carousel__item that either is focused or contains the focused element. You can specify which .spark-carousel__items can be focused by giving them a [tabindex] attribute with a non-negative integer value.

Item sizing/responsive

You can easily add responsive behaviors to items using media queries, as shown in some of the examples. In cases where you have static resources, like images, it would be best to use some methodology to load in appropriately-sized images, rather than resizing the images using css (as shown here).

Hero with Auto-Advance Example

<style>
.example-hero .spark-carousel__item--content {
  max-height: 50vh;
}
</style>
<div class="spark-carousel example-hero" data-spark-carousel-hero-light data-spark-carousel-auto-advance="6">
  <div class="spark-carousel__outer-container">
    <div class="spark-carousel__container-mask">
      <div class="spark-carousel__container">
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content">
            <img src="http://i.imgur.com/x6xuJAI.jpg" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content">
            <img src="http://i.imgur.com/HxQhuzn.jpg" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content">
            <img src="http://i.imgur.com/nHkUDFO.jpg" />
          </div>
        </div>
      </div>
    </div>
    <div class="spark-carousel__controls">
      <div class="spark-carousel__back"><i class="spark-icon-arrow-chevron-left spark-icon--fill"></i></div>
      <div class="spark-carousel__forward"><i class="spark-icon-arrow-chevron-right spark-icon--fill"></i></div>
      <div class="spark-carousel__pause"><i class="spark-icon-video-control-pause spark-icon--fill"></i></div>
      <div class="spark-carousel__dots"></div>
    </div>
  </div>
</div>
// Vanilla JS
var el = document.querySelector('.spark-carousel');
var carouselInstance = new Spark.Carousel(el);

// jQuery
$('.spark-carousel').sparkCarousel();
  • Add the [data-spark-carousel-hero-dark] attribute to the .spark-carousel element to use the dark hero treatment
  • Add the [data-spark-carousel-hero-light] attribute to the .spark-carousel element to use the light hero treatment
  • Add the [data-spark-carousel-auto-advance] attribute to the .spark-carousel element with a numeric value to use auto-advance with specified value, in seconds, as the time between transitions. This option is only supported when using the hero treatment.

Item Panels with Item Wrapping Example

<style>
  .example-default .spark-carousel__item img {
    width: 140px;
  }

  @media (max-width: 543px) {
    .example-default .spark-carousel__item img {
      width: 250px;
    }
  }
</style>
<div class="spark-carousel example-default" data-spark-carousel-wrap-items data-spark-carousel-scroll-velocity="10">
  <div class="spark-carousel__outer-container">
    <div class="spark-carousel__container-mask">
      <div class="spark-carousel__container">
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content spark-carousel__panel"><img src="http://i.imgur.com/oNahU18.png" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content spark-carousel__panel"><img src="http://i.imgur.com/71EbfvS.png" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content spark-carousel__panel"><img src="http://i.imgur.com/jufndap.png" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content spark-carousel__panel"><img src="http://i.imgur.com/oNahU18.png" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content spark-carousel__panel"><img src="http://i.imgur.com/71EbfvS.png" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content spark-carousel__panel"><img src="http://i.imgur.com/jufndap.png" />
          </div>
        </div>
      </div>
    </div>
    <div class="spark-carousel__controls">
      <div class="spark-carousel__back"><i class="spark-icon-arrow-chevron-left spark-icon--fill"></i></div>
      <div class="spark-carousel__forward"><i class="spark-icon-arrow-chevron-right spark-icon--fill"></i></div>
      <div class="spark-carousel__dots"></div>
    </div>
  </div>
</div>
// Vanilla JS
var el = document.querySelector('.spark-carousel');
var carouselInstance = new Spark.Carousel(el);

// jQuery
$('.spark-carousel').sparkCarousel();
  • Add the [data-spark-carousel-wrap-items] attribute to the .spark-carousel element to enable item wrapping

Filmstrip with Smooth Scrolling Example

Carousel Panel Title

<style>
  .example-panel .spark-carousel__item img {
    height: 200px;
  }
</style>
<div class="spark-carousel example-panel" data-spark-carousel-panel data-spark-carousel-smooth-scroll>
  <div class="spark-carousel__header">
    <h4>Carousel Panel Title</h4>
  </div>
  <div class="spark-carousel__outer-container">
    <div class="spark-carousel__container-mask">
      <div class="spark-carousel__container">
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content">
            <img src="http://i.imgur.com/UonuJhe.jpg" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content">
            <img src="http://i.imgur.com/BqZDtpe.jpg" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content">
            <img src="http://i.imgur.com/ItFpa2i.jpg" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content">
            <img src="http://i.imgur.com/oAA0eiQ.jpg" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content">
            <img src="http://i.imgur.com/4Vm54ua.jpg" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content">
            <img src="http://i.imgur.com/14QwCRK.jpg" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content">
            <img src="http://i.imgur.com/AM2EZWf.jpg" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content">
            <img src="http://i.imgur.com/aPazeXj.jpg" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content">
            <img src="http://i.imgur.com/AH29Dt1.jpg" />
          </div>
        </div>
      </div>
    </div>
    <div class="spark-carousel__controls">
      <div class="spark-carousel__back"><i class="spark-icon-arrow-chevron-left spark-icon--fill"></i></div>
      <div class="spark-carousel__forward"><i class="spark-icon-arrow-chevron-right spark-icon--fill"></i></div>
      <div class="spark-carousel__dots"></div>
    </div>
  </div>
</div>
// Vanilla JS
var el = document.querySelector('.spark-carousel');
var carouselInstance = new Spark.Carousel(el);

// jQuery
$('.spark-carousel').sparkCarousel();
  • Add the [data-spark-carousel-panel] attribute to the .spark-carousel element to use the Filmstrip treatment
  • Add the [data-spark-carousel-smooth-scroll] attribute to the .spark-carousel element to enable smooth scrolling.
  • Add the [data-spark-carousel-smooth-scroll-center] attribute to the .spark-carousel element to enable after-scroll item centering when using the smooth-scroll option.

Edge Scrolling with Custom Velocity Example

<style>
  .example-default .spark-carousel__item img {
    width: 140px;
  }

  @media (max-width: 543px) {
    .example-default .spark-carousel__item img {
      width: 250px;
    }
  }
</style>

<div class="spark-carousel example-default" data-spark-carousel-edge data-spark-carousel-scroll-velocity="10">
  <div class="spark-carousel__outer-container">
    <div class="spark-carousel__container-mask">
      <div class="spark-carousel__container">
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content spark-carousel__panel"><img src="http://i.imgur.com/oNahU18.png" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content spark-carousel__panel"><img src="http://i.imgur.com/71EbfvS.png" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content spark-carousel__panel"><img src="http://i.imgur.com/jufndap.png" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content spark-carousel__panel"><img src="http://i.imgur.com/oNahU18.png" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content spark-carousel__panel"><img src="http://i.imgur.com/71EbfvS.png" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content spark-carousel__panel"><img src="http://i.imgur.com/jufndap.png" />
          </div>
        </div>
      </div>
    </div>
    <div class="spark-carousel__controls">
      <div class="spark-carousel__back"><i class="spark-icon-arrow-chevron-left spark-icon--fill"></i></div>
      <div class="spark-carousel__forward"><i class="spark-icon-arrow-chevron-right spark-icon--fill"></i></div>
      <div class="spark-carousel__dots"></div>
    </div>
  </div>
</div>
// Vanilla JS
var el = document.querySelector('.spark-carousel');
var carouselInstance = new Spark.Carousel(el);

// jQuery
$('.spark-carousel').sparkCarousel();
  • Add the [data-spark-carousel-edge] attribute to the .spark-carousel element to enable edge-limited scrolling (navigation dots are not available with this option)
  • Add the [data-spark-carousel-scroll-velocity] attribute to the .spark-carousel element with a numeric value to set the default starting scroll velocity for the carousel for forward, back, and focus events. The default velocity is 5 (measured in pixels per 1/60 second).