Skip Navigation

Carousel

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

View v2 to v3 Migration Information

Skip 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

Carousel Panel Title

Skip Carousel


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.
Photo Gallery Carousel
Image of bike
Image of green fields
Image of waterfall


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)
  • 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.

For all available methods and full API, refer to the component code on Bitbucket.

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

Photo Gallery Carousel
Image of bike
Image of green fields
Image of waterfall 
<div class="spark-carousel example-hero" role="region" aria-labelled-by="example-carousel-label" data-spark-carousel-hero data-spark-carousel-auto-advance="6">
  <div class="spark-carousel__outer-container">
    <!-- Visually hidden label for assistive technologies -->
    <span id="example-carousel-label" class="spark-assistive-text">Photo Gallery Carousel</span>

    <!-- Carousel controls should appear before the container mask -->
    <div class="spark-carousel__controls">
      <button type="button" aria-label="Pause Carousel" class="spark-carousel__pause">
        <i class="spark-icon-video-control-pause spark-icon--fill"></i>
      </button>
      <button type="button" aria-label="Previous Image" class="spark-carousel__back">
        <i class="spark-icon-arrow-chevron-left spark-icon--line"></i>
      </button>
      <button type="button" aria-label="Next Image" class="spark-carousel__forward">
        <i class="spark-icon-arrow-chevron-right spark-icon--line"></i>
      </button>
      <div class="spark-carousel__dots"></div>
    </div>

    <div class="spark-carousel__container-mask">
      <div class="spark-carousel__container">
        <div class="spark-carousel__item">
          <div class="spark-carousel__item--content">
            <img alt="Image of bike" src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/carousel/bike.jpg" />
          </div>
        </div>

        <div class="spark-carousel__item">
          <div class="spark-carousel__item--content">
            <img alt="Image of green fields" src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/carousel/green_fields.jpg" />
          </div>
        </div>

        <div class="spark-carousel__item">
          <div class="spark-carousel__item--content">
            <img alt="Image of waterfall" src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/carousel/waterfall.jpg" />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style type="text/css">
  
</style>
// Vanilla JS
var el = document.querySelector('.spark-carousel');
var carouselInstance = new Spark.Carousel(el);
  • 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

Skip Carousel 
<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">

      <!-- Skip carousel link should be before the spark-carousel__container -->
      <a class="spark-carousel__skip" href="#">Skip Carousel</a>

      <div class="spark-carousel__container">
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content spark-carousel__panel"><img alt="" src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/carousel/panel--new-york.png" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content spark-carousel__panel"><img alt="" src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/carousel/panel--los-angeles.png" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content spark-carousel__panel"><img alt="" src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/carousel/panel--dallas.png" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content spark-carousel__panel"><img alt="" src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/carousel/panel--boston.png" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content spark-carousel__panel"><img alt="" src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/carousel/panel--miami.png" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content spark-carousel__panel"><img alt="" src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/carousel/panel--san-francisco.png" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content spark-carousel__panel"><img alt="" src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/carousel/panel--new-york.png" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content spark-carousel__panel"><img alt="" src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/carousel/panel--los-angeles.png" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content spark-carousel__panel"><img alt="" src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/carousel/panel--dallas.png" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content spark-carousel__panel"><img alt="" src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/carousel/panel--boston.png" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content spark-carousel__panel"><img alt="" src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/carousel/panel--miami.png" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content spark-carousel__panel"><img alt="" src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/carousel/panel--san-francisco.png" />
          </div>
        </div>
      </div>
    </div>
    <div class="spark-carousel__controls">
      <div class="spark-carousel__back"><i aria-label="Move carousel back" class="spark-icon-arrow-chevron-left spark-icon--fill"></i></div>
      <div class="spark-carousel__forward"><i aria-label="Move carousel forward" class="spark-icon-arrow-chevron-right spark-icon--fill"></i></div>
      <div class="spark-carousel__dots"></div>
    </div>
  </div>
</div>

<style type="text/css">
  
  .example-default .spark-carousel__item img {
    width: 224px;
  }

  @media (max-width: 543px) {
    .example-default .spark-carousel__item img {
      width: 224px;
    }
  }

</style>
// Vanilla JS
var el = document.querySelector('.spark-carousel');
var carouselInstance = new Spark.Carousel(el);
  • 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

Skip Carousel 
<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">

      <!-- Skip carousel link should be before the spark-carousel__container -->
      <a class="spark-carousel__skip" href="#">Skip Carousel</a>

      <div class="spark-carousel__container">
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content">
            <img alt="" src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/carousel/UonuJhe.jpg" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content">
            <img alt="" src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/carousel/BqZDtpe.jpg" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content">
            <img alt="" src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/carousel/ItFpa2i.jpg" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content">
            <img alt="" src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/carousel/oAA0eiQ.jpg" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content">
            <img alt="" src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/carousel/4Vm54ua.jpg" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content">
            <img alt="" src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/carousel/14QwCRK.jpg" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content">
            <img alt="" src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/carousel/AM2EZWf.jpg" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content">
            <img alt="" src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/carousel/aPazeXj.jpg" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content">
            <img alt="" src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/carousel/AH29Dt1.jpg" />
          </div>
        </div>
      </div>
    </div>
    <div class="spark-carousel__controls">
      <div class="spark-carousel__back"><i aria-label="Move carousel back" class="spark-icon-arrow-chevron-left spark-icon--fill"></i></div>
      <div class="spark-carousel__forward"><i aria-label="Move carousel forward" class="spark-icon-arrow-chevron-right spark-icon--fill"></i></div>
      <div class="spark-carousel__dots"></div>
    </div>
  </div>
</div>

<style type="text/css">
  
  .example-panel .spark-carousel__item img {
    height: 200px;
  }

</style>
// Vanilla JS
var el = document.querySelector('.spark-carousel');
var carouselInstance = new Spark.Carousel(el);
  • 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

Skip Carousel 
<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">

      <!-- Skip carousel link should be before the spark-carousel__container -->
      <a class="spark-carousel__skip" href="#">Skip Carousel</a>

      <div class="spark-carousel__container">
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content spark-carousel__panel"><img alt="" src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/carousel/panel--new-york.png" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content spark-carousel__panel"><img alt="" src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/carousel/panel--los-angeles.png" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content spark-carousel__panel"><img alt="" src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/carousel/panel--dallas.png" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content spark-carousel__panel"><img alt="" src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/carousel/panel--boston.png" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content spark-carousel__panel"><img alt="" src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/carousel/panel--miami.png" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content spark-carousel__panel"><img alt="" src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/carousel/panel--san-francisco.png" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content spark-carousel__panel"><img alt="" src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/carousel/panel--new-york.png" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content spark-carousel__panel"><img alt="" src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/carousel/panel--los-angeles.png" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content spark-carousel__panel"><img alt="" src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/carousel/panel--dallas.png" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content spark-carousel__panel"><img alt="" src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/carousel/panel--boston.png" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content spark-carousel__panel"><img alt="" src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/carousel/panel--miami.png" />
          </div>
        </div>
        <div class="spark-carousel__item" tabindex="0">
          <div class="spark-carousel__item--content spark-carousel__panel"><img alt="" src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/carousel/panel--san-francisco.png" />
          </div>
        </div>
      </div>
    </div>
    <div class="spark-carousel__controls">
      <div class="spark-carousel__back"><i aria-label="Move carousel back" class="spark-icon-arrow-chevron-left spark-icon--fill"></i></div>
      <div class="spark-carousel__forward"><i aria-label="Move carousel forward" class="spark-icon-arrow-chevron-right spark-icon--fill"></i></div>
      <div class="spark-carousel__dots"></div>
    </div>
  </div>
</div>

<style type="text/css">
  
  .example-default .spark-carousel__item img {
    width: 224px;
  }

  @media (max-width: 543px) {
    .example-default .spark-carousel__item img {
      width: 224px;
    }
  }

</style>
// Vanilla JS
var el = document.querySelector('.spark-carousel');
var carouselInstance = new Spark.Carousel(el);
  • 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).

Accessibility Notes

Usage of the Hero Carousel requires additional attributes to make the Carousel fully accessible to assistive technologies. Because the Carousel contains image and potentially text content but is housed within a generic <div>, the region="role" and aria-labelled-by attributes should be added to the .spark-carousel element. The region attribute ensures that the aria-label is supported correctly, while the aria-labelled-by attribute indicates the element that contains a label for the carousel as a whole. The value of the aria-labelled-by attribute should be the same as the id of the spark-assistive-text element that lives inside the carousel.

<div class="spark-carousel example-hero" role="region" aria-labelled-by="example-carousel-label" data-spark-carousel-hero data-spark-carousel-auto-advance="6">
  ...
</div>

The primary way of navigating the Hero Carousel is through interaction with the carousel controls such as the Play/Pause and arrow buttons. These controls are keyboard accessible and can be reached by the Tab key as they each have the tabindex attribute set. This approach is to allow users to pause/play the carousel when the autoplay/auto-advance feature is enabled on the carousel.

If the autoplay/auto-advance feature is not enabled, the .spark-carousel__pause control’s markup should be removed or hidden via CSS as it does not serve any purpose in this scenario.

It is important to provide headings or titles for Carousels to tell users what the carousels contain or reference. These can be provided through the use of headings such as <h1>-<h6>, depending on the hierarchy of your content. In the case of the Hero Carousel, ARIA attributes are used to provide a title to assistive technologies via the aria-labelled-by attribute for situations where a heading is not provided.

If using ARIA attributes to provide a label, the HTML element used to provide the label can be used for a heading such as <h1>-<h6> depending on the hierarchy of your content. It is not required to use a <span> tag.

Carousels that display navigational controls with icons require aria-label attributes to ensure assistive technologies correctly identify the purpose of the controls to users.

<div class="spark-carousel__back"><i aria-label="Move carousel back" class="spark-icon-arrow-chevron-left spark-icon--fill"></i></div>

For Carousels other than the Hero variation, we have introduced a Skip Carousel link that is intended to allow keyboard users to bypass the Carousel and shift focus to the next element that is focusable. This is because the other Carousel variations are navigated by tabbing through individual “slides” or images, and as such a user has to navigate through the entire Carousel before they can shift focus to elements that appear after the Carousel. Use of this feature is recommended when there are more than 8 items within the Carousel.

Usage

We recommend adding the Skip Carousel link when there are more than 8 items in a Carousel. If fewer items are present then the .spark-carousel__skip element can be removed from the markup. If there is a possibility that a Carousel could have a dynamic number of items, we recommend using Javascript to query the number of items in the Carousel and managing the visibility of the .spark-carousel__skip element using available display helper classes.

For this feature to work as intended, the href attribute needs to be set to the first focusable element after the Carousel. This requires that said element has an id attribute whose value matches the href value.

When a Skip Carousel link is available, the ESC key can also be used to quickly shift focus to the link if a user has been navigating via keyboard and is partly through the Carousel.