Carousel
Displays multiple items in a scrollable area
Demo
API
Tag
| Name |
|---|
<s-carousel>
|
Slots
| Tag | Slot Name | Required | Value | Example |
|---|---|---|---|---|
<div> |
carousel-item |
A carousel item. | <div slot="carousel-item">My Carousel Item</div> |
Attributes
| Name | Type | Required | Description |
|---|---|---|---|
| itemwidth | Number | Width of each carousel item in pixels. All carousel items must have the same width. | |
| itemheight | Number | Height of each carousel item in pixels. All carousel items must have the same height. |
Properties
| Name | Type | Required | Description |
|---|---|---|---|
| itemWidth | Number | Width of each carousel item in pixels. All carousel items must have the same width. | |
| itemHeight | Number | Height of each carousel item in pixels. All carousel items must have the same height. |
Demo
API
Tag
| Name |
|---|
<SCarousel>
|
Slots
| Tag | Slot Name | Required | Value | Example |
|---|---|---|---|---|
<div> |
carousel-item |
A carousel item. | <div slot="carousel-item">My Carousel Item</div> |
Props
| Name | Type | Required | Description |
|---|---|---|---|
| itemWidth | Number | Width of each carousel item. All carousel items must have the same width. | |
| itemHeight | Number | Height of each carousel item. All carousel items must have the same height. |
Skylab React links
i18n Strings
| ID | Description | Default value |
|---|---|---|
"skylab.carousel.ariaLabel.goToSlide"
|
Label for the "go to slide" button. | Go to slide {INDEX} |
Guidelines
Providing content
Content must be provided as slotted children of the carousel component. Do not add or remove slots in an existing carousel; instead, create a new carousel component.
Design
Design resources can be found on the Skylab design documentation site: skylab.avalara.com