Carousel Component

An image and content carousel with animation support and many customizable options.

Basics

Here's a complete example—we'll break down the individual pieces farther down.

<carousel label="Testing the dummy carousel">
  <slide-container>
    <slide-previous></slide-previous>
    <slide-next></slide-next>
    <slide>
      <img class="orbit-image" src="http://foundation.zurb.com/sites/docs/assets/img/orbit/01.jpg" alt="Space">
      <figcaption class="orbit-caption">Space, the final frontier.</figcaption>
    </slide>
    <slide>
      <img class="orbit-image" src="http://foundation.zurb.com/sites/docs/assets/img/orbit/02.jpg" alt="Space">
      <figcaption class="orbit-caption">Lets Rocket!</figcaption>
    </slide>
    <slide>
      <img class="orbit-image" src="http://foundation.zurb.com/sites/docs/assets/img/orbit/03.jpg" alt="Space">
      <figcaption class="orbit-caption">Encapsulating</figcaption>
    </slide>
    <slide>
      <img class="orbit-image" src="http://foundation.zurb.com/sites/docs/assets/img/orbit/04.jpg" alt="Space">
      <figcaption class="orbit-caption">Outta This World</figcaption>
    </slide>
  </slide-container>
  <nav class="orbit-bullets">
    <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
    <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
    <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
    <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
  </nav>
</carousel>

Wrapper

The wrapper houses the entire carousel. We use the label="" attribute to label what the carousel is, for assistive technology.

<carousel label="Testing the dummy carousel">
...
</carousel>

Slide Container

The slide container houses each individual slide. In our above markup example, we also placed the buttons in here, so we can anchor them to the center edge of the slide container. However, they can be moved anywhere within the slide container.

<slide-container>
...
</slide-container>

Slide

The slide houses the markup we would like to use within our slider. The first slide is marked with the .is-active class to indicate it's the default. You can place any HTML you want inside of the slide, but foundation offers some premade styles for image-based slides with a caption.

...
<slide>
    <img class="orbit-image" src="http://foundation.zurb.com/sites/docs/assets/img/orbit/01.jpg" alt="Space">
    <figcaption class="orbit-caption">Space, the final frontier.</figcaption>
</slide>
...

Next/Previous Arrows

Carousel controls use the <slide-previous> and <slide-next> tag. The below example has an important accessibility hook: since we're using ASCII arrows for the carousel controls, we add screen reader-only text (wrapped in the class .show-for-sr) that explain what the controls do.

...
<slide-previous></slide-previous>
<slide-next></slide-next>
...

Bullets

The bullets serve two purposes: they mark the current slide, and can be clicked on to navigate to another slide. Like with the controls, the bullets also have screen reader-friendly labels.

...
<nav class="orbit-bullets">
  <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
  <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
  <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
  <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
</nav>
...

Slide Contents

A carousel slide can contain images or HTML—you can even mix between slides in one carousel!

<slide>
  <div>
    <h3 class="text-center">2: You can also throw some text in here!</h3>
    <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
    <h3 class="text-center">This Orbit slider does not use animations.</h3>
  </div>
</slide>