Since Shoelace 2.0 Code experimental

Carousel Item

sl-carousel-item

A carousel item represent a slide within a carousel.

Examples

The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash The sun is setting over a lavender field - Photo by Leonard Cotte on Unsplash A field of grass with the sun setting in the background - Photo by Sapan Patel on Unsplash A scenic view of a mountain with clouds rolling in - Photo by V2osk on Unsplash 
<sl-carousel pagination>
  <sl-carousel-item>
    <img
      alt="The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash"
      src="/assets/examples/carousel/mountains.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash"
      src="/assets/examples/carousel/waterfall.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="The sun is setting over a lavender field - Photo by Leonard Cotte on Unsplash"
      src="/assets/examples/carousel/sunset.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="A field of grass with the sun setting in the background - Photo by Sapan Patel on Unsplash"
      src="/assets/examples/carousel/field.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="A scenic view of a mountain with clouds rolling in - Photo by V2osk on Unsplash"
      src="/assets/examples/carousel/valley.jpg"
    />
  </sl-carousel-item>
</sl-carousel>

sl-carousel pagination=true
  sl-carousel-item
    img alt="The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash" src="/assets/examples/carousel/mountains.jpg"
  sl-carousel-item
    img alt="A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash" src="/assets/examples/carousel/waterfall.jpg"
  sl-carousel-item
    img alt="The sun is setting over a lavender field - Photo by Leonard Cotte on Unsplash" src="/assets/examples/carousel/sunset.jpg"
  sl-carousel-item
    img alt="A field of grass with the sun setting in the background - Photo by Sapan Patel on Unsplash" src="/assets/examples/carousel/field.jpg"
  sl-carousel-item
    img alt="A scenic view of a mountain with clouds rolling in - Photo by V2osk on Unsplash" src="/assets/examples/carousel/valley.jpg"

Slots

Name Details
(default) The carousel item’s content..

Learn more about using slots.

Custom Properties

Name Details
--aspect-ratio

The slide’s aspect ratio. Inherited from the carousel by default.

Learn more about customizing CSS custom properties.