# Carousel Item

[component-header:sl-carousel-item]

```html preview
<sl-carousel-item>
  <img
    alt="The sun is setting over a lavender field - Photo by Leonard Cotte on Unsplash"
    src="/assets/examples/carousel/leonard-cotte-c1Jp-fo53U8-unsplash.jpg"
  />
</sl-carousel-item>
```

```jsx react
import { SlCarouselItem } from '@shoelace-style/shoelace/dist/react';

const App = () => (
  <SlCarouselItem>
    <img
      alt="The sun is setting over a lavender field - Photo by Leonard Cotte on Unsplash"
      src="/assets/examples/carousel/leonard-cotte-c1Jp-fo53U8-unsplash.jpg"
    />
  </SlCarouselItem>
);
```

?> Additional demonstrations can be found in the [carousel examples](/components/carousel).

[component-metadata:sl-carousel-item]