Carousel Item
<wa-carousel-item>
A carousel item represent a slide within a carousel.
<wa-carousel pagination> <wa-carousel-item> <img alt="The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash" src="/assets/examples/carousel/mountains.jpg" /> </wa-carousel-item> <wa-carousel-item> <img alt="A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash" src="/assets/examples/carousel/waterfall.jpg" /> </wa-carousel-item> <wa-carousel-item> <img alt="The sun is setting over a lavender field - Photo by Leonard Cotte on Unsplash" src="/assets/examples/carousel/sunset.jpg" /> </wa-carousel-item> <wa-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" /> </wa-carousel-item> <wa-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" /> </wa-carousel-item> </wa-carousel>
Additional demonstrations can be found in the carousel examples.
Slots Jump to heading
| Name | Description |
|---|---|
| (default) | The carousel item's content.. |
CSS custom properties Jump to heading
| Name | Description |
|---|---|
--aspect-ratio |
The slide's aspect ratio. Inherited from the carousel by default.
|
Importing Jump to heading
The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
To manually import this component from the CDN, use the following code.
import 'https://early.webawesome.com/webawesome@3.0.0-alpha.4/dist/components/carousel-item/carousel-item.js';