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
Props
Name
color
Orion.Color | Orion.ColorAlt = 'brand'hideNavigationButtons
boolean = falsehideNavigationDots
boolean = falseloop
boolean = falsemodelValue
number | string = undefinedpauseOnHover
boolean = falsestepTimer
number = undefinedEvents
Name
Payload type
update:modelValue
number | stringSlots
Name
Bindings
poster
step:
number | string | undefinedstepIndex:
numberdefault
step:
number | string | undefinedstepIndex:
numbergoPreviousStep:
() => voidgoNextStep:
() => voidnavigation
step:
number | string | undefinedstepIndex:
numbergoPreviousStep:
() => voidgoNextStep:
() => voidactions
step:
number | string | undefinedstepIndex:
numbergoPreviousStep:
() => voidgoNextStep:
() => voidgoToStep:
(step: { name: number | string }) => voidgoToStepIndex:
(index: number) => voidPublicInstance
Name
Type
step
() => string | number | undefinedstepsLength
() => numberstepIndex
() => numbershouldLoop
() => booleangoToStep
(step: {
name: string | number;
uid: number;
}) => voidgoToStepIndex
(index: number) => voidgoPreviousStep
() => voidgoNextStep
() => void_el
(() => HTMLElement | undefined) | undefinedProvide
Name
Type
_carousel
publicInstanceOrion Carousel Item
Props
Name
lazy
boolean = falselazyOnce
boolean = falsename
number | string = undefined Required
Slots
Name
Bindings
default
isActive:
boolean