Carousel
Om komponenten
Carousel er en komponent som brukes for fremvisning av innhold som tar mye oppmerksomhet til brukeren og der brukeren kan se flere seksjoner av slikt innhold ved å scrolle eller navigere med piler til høyre eller venstre.
Egnet til:
- Vise en samling av bilder eller videolooper som kan "blas" gjennom.
- I en enhetshero, kan Carousel ta hele skjermen
Uegnet til:
- Carousel som ikke er i en enhetshero, skal ikke ta opp hele skjermen men ligge innenfor layout container.
Relaterte komponenter
Eksempler
Carousel API eksempel
Bildegalleri satt sammen med Carousel og Tabs
Eksempel på bildegalleri med Carousel
Props
Carousel
| Prop | Description | Default |
|---|---|---|
id? | - | |
align? | Alignment of the items relative to the carousel viewport. | center |
autoPlayDelay? | Delay in milliseconds between each automatic transition of the carousel. Any interaction with the carousel will immediately stop the autoplay. | - |
initialIndex? | The initial snapped index of the carousel. | 0 |
orientation? | Orientation of the carousel. | horizontal |
scrollGestures? | Whether the carousel should scroll with regular mouse/trackpad scroll gestures, in addition to swipe gestures. | false |
| Events | ||
onSelect? | Callback invoked when the snapped index changes. | - |
onSettled? | Callback invoked after the carousel scrolling "settles". Think of this as the debounced version of onSelect. | - |
CarouselItemsContainer
| Prop | Description | Default |
|---|---|---|
id? | - |
CarouselItems
| Prop | Description | Default |
|---|---|---|
id? | - |
CarouselItem
| Prop | Description | Default |
|---|---|---|
id? | - |
CarouselControls
| Prop | Description | Default |
|---|---|---|
id? | - |
CarouselButton
| Prop | Description | Default |
|---|---|---|
isPending? | - | |
form? | - | |
autoFocus? | - | |
isDisabled? | - | |
type? | 'button' | |
preventFocusOnPress? | - | |
formAction? | - | |
formEncType? | - | |
formMethod? | - | |
formNoValidate? | - | |
formTarget? | - | |
name? | - | |
value? | - | |
excludeFromTabOrder? | - | |
children? | - | |
render? | - | |
variant? | The variant of the button | primary |
color? | Adjusts the color of the button for usage on different backgrounds. | blue |
animateIcon? | - | |
isIconOnly? | When the button is without text, but with a single icon. | true |
href? | A URL to link to. See MDN. | - |
target? | - | |
| Events | ||
onFocus? | Handler that is called when the element receives focus. | - |
onBlur? | Handler that is called when the element loses focus. | - |
onKeyDown? | Handler that is called when a key is pressed. | - |
onKeyUp? | Handler that is called when a key is released. | - |
onClick? | Not recommended – use onPress instead. onClick is an alias for onPress
provided for compatibility with other libraries. onPress provides
additional event details for non-mouse interactions. | - |
onPress? | Handler that is called when the press is released over the target. | - |
onPressStart? | Handler that is called when a press interaction starts. | - |
onPressEnd? | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. | - |
onPressChange? | Handler that is called when the press state changes. | - |
onPressUp? | Handler that is called when a press is released over the target, regardless of whether it started on the target or not. | - |
onFocusChange? | Handler that is called when the element's focus status changes. | - |
onHoverStart? | Handler that is called when a hover interaction starts. | - |
onHoverEnd? | Handler that is called when a hover interaction ends. | - |
onHoverChange? | Handler that is called when the hover state changes. | - |
| Links | ||
referrerPolicy? | - | |
rel? | - | |
hrefLang? | - | |
download? | - | |
ping? | - | |
routerOptions? | - | |
| Styles | ||
className? | 'react-aria-Button' 'react-aria-Link' | |
style? | - | |
| Accessibility | ||
id? | - | |
aria-controls? | - | |
aria-current? | - | |
aria-describedby? | - | |
aria-details? | - | |
aria-disabled? | - | |
aria-expanded? | - | |
aria-haspopup? | - | |
aria-label? | - | |
aria-labelledby? | - | |
aria-pressed? | - | |
Media
| Prop | Description | Default |
|---|---|---|
id? | - | |
fit? | Control how the content should be placed with the object-fit property
You might for example want to use fit="contain" portrait images that should not be cropped | cover |