Carousel

Denne komponenten er under aktiv utvikling, og vi trenger din feedback!

Er du eventyrlysten, test den og kom med innspill til oss på Slack.

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

Forhåndsvisning

Kode

Carousel API eksempel

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?`		-
`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.	-
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?`		-
`target?`		-
`hrefLang?`		-
`download?`		-
`ping?`		-
`routerOptions?`		-
Styles
`className?`		'react-aria-Form'
`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