Carousel

Additional options for the slideshow component for cycling through elements—images or slides of text—like a carousel.

Indicators

Set @indicators="round" to add rounded indicators to the carousel, alongside the previous/next controls. The indicators let users jump directly to a particular slide.

<carousel indicators="round">
  <carousel-item>
    <image href="..." />
  </carousel-item>
  <carousel-item>
    <image href="..." />
  </carousel-item>
  <carousel-item>
    <image href="..." />
  </carousel-item>
</carousel>

<ol outputclass="carousel" otherprops="indicators(round)">
  <li>
    <image href="..." />
  </li>
  <li>
    <image href="..." />
  </li>
  <li>
    <image href="..." />
  </li>
</ol>

With captions

Add captions by using <fig> elements

The First Slide

The Second Slide

The Third Slide

<carousel indicators="round">
  <carousel-item>
    <fig>
      <title outputclass="carousel-caption-readable">The First Slide</title>
      <image href="..." />
    </fig>
  </carousel-item>
  <carousel-item>
    <fig>
      <title outputclass="carousel-caption-readable">The Second Slide</title>
      <image href="..." />
    </fig>
  </carousel-item>
  <carousel-item>
    <fig>
      <title outputclass="carousel-caption-readable">The Third Slide</title>
      <image href="..." />
    </fig>
  </carousel-item>
</carousel>

<ol outputclass="carousel" otherprops="indicators(round)">
  <li>
    <fig>
      <title outputclass="carousel-caption-readable">The First Slide</title>
      <image href="..." />
    </fig>
  </li>
  <li>
    <fig>
      <title outputclass="carousel-caption-readable">The Second Slide</title>
      <image href="..." />
    </fig>
  </li>
  <li>
    <fig>
      <title outputclass="carousel-caption-readable">The Third Slide</title>
      <image href="..." />
    </fig>
  </li>
</ol>