OrionCarousel

<o-carousel> a pour but d'être un moyen très simple d'afficher un composant de type carrousel de présentation.

Il propose plusieurs options de personnalisation comme le défilement automatique, la mise en pause lors du survol ainsi que différents slots pour en gérer le contenu.

Usage

CarouselSimpleSlider CarouselAutoSlider CarouselPoster CarouselPlayground

VModels

Name
vModelUndef<number | string> = undefined

Props

Name
colorOrion.Color | Orion.ColorAlt = 'brand'
hideNavigationButtonsboolean = undefined
hideNavigationDotsboolean = undefined
loopboolean = undefined
pauseOnHoverboolean = undefined
stepTimernumber = undefined

Slots

Name
Bindings
poster
step: number | string | undefined
stepIndex: number
default
step: number | string | undefined
stepIndex: number
goPreviousStep: () => void
goNextStep: () => void
navigation
step: number | string | undefined
stepIndex: number
goPreviousStep: () => void
goNextStep: () => void
actions
step: number | string | undefined
stepIndex: number
goPreviousStep: () => void
goNextStep: () => void
goToStep: (step: { name: number | string }) => void
goToStepIndex: (index: number) => void

PublicInstance

Name
Type
step
() => Undef<string | number>
stepsLength
() => number
stepIndex
() => number
shouldLoop
() => boolean | undefined
goToStep
(step: (typeof this.steps)[number]) => void
goToStepIndex
(index: number) => void
goPreviousStep
() => void
goNextStep
() => void
_el
() => HTMLElement | undefined

Provide

Name
Type
_carousel
publicInstance

Props

Name
lazyboolean = undefined
lazyOnceboolean = undefined
namenumber | string = undefined

Slots

Name
Bindings
default
isActive: boolean
MIT Licensed | Copyright © 2023-present Orion UI