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
Orion Carousel
VModels
Name
vModel
Undef<number | string> = undefined
Props
Name
color
any = 'brand'
hideNavigationButtons
boolean = undefined
hideNavigationDots
boolean = undefined
loop
boolean = undefined
pauseOnHover
boolean = undefined
stepTimer
number = 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
Orion Carousel Item
Props
Name
lazy
boolean = undefined
lazyOnce
boolean = undefined
name
string | number = undefined
Slots
Name
Bindings
default
isActive:
boolean