Carousel Item
<quiet-carousel-item>
Represents individual items used in a carousel.
This component must only be used within a carousel. You can see some examples of carousel items being used in the carousel documentation.
API Jump to heading
Importing Jump to heading
The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.
To manually import <quiet-carousel-item> from the CDN, use the following code.
import 'https://cdn.jsdelivr.net/npm/@quietui/quiet-browser@1.0.0/dist/components/carousel-item/carousel-item.js';
To manually import <quiet-carousel-item> from npm, use the following code.
import '@quietui/quiet/dist/components/carousel-item/carousel-item.js';
Slots Jump to heading
Carousel Item supports the following slots. Learn more about using slots
| Name | Description |
|---|---|
| (default) | The content to show inside the carousel item. |
Properties Jump to heading
Carousel Item has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties
| Property / Attribute | Description | Reflects | Type | Default |
|---|---|---|---|---|
name
|
An optional name for the carousel item so you can reference it with the
active-name attribute.
|
|
string
|
''
|
CSS parts Jump to heading
Carousel Item exposes internal elements that can be styled with CSS using the selectors shown below. Learn more about CSS parts
| Name | Description | CSS selector |
|---|---|---|
content |
A flex wrapper around the carousel item's content. |
::part(content)
|