<dy-carousel>
A carousel is a slideshow component for cycling through elements—images or slides of text. It provides an interactive way to display multiple pieces of content in a limited space.
Example
Loading...
<dy-carousel style=${"width: 100%; color: white;"} .items=${ [ { "img": "https://picsum.photos/id/23/800/600?grayscale", "title": "Title 1", "background": "gray", "description": "This is description section 1" }, { "img": "https://picsum.photos/id/43/800/600?grayscale", "title": "Title 2", "background": "#dfdfdf", "description": "This is description section 2" }, { "img": "https://picsum.photos/id/63/800/600?grayscale", "title": "Title 3", "background": "#dfdfdf", "description": "This is description section 3" } ] }></dy-carousel>
API
Shadow DOM; Extends GemElement
Instance Properties
| Property(Attribute) | Reactive | Type | Description |
|---|---|---|---|
crossorigin(crossorigin) |
Yes | 'anonymous' | 'use-credentials' |
|
interval(interval) |
Yes | number |
|
change |
Emitter<number> |
||
data |
Yes | CarouselItem[] |
@deprecated |
items |
Yes | CarouselItem[] |
|
next |
() => void |
||
prev |
() => void |
||
jump |
(index: number) => void |
Other
| Type | Value |
|---|---|
| Event | change |
| Part | img, title, tag, content, button, description, nav |