OrionCarousel
<o-carousel> aims at being a simple way to display a carousel component.
It comes with many options to customize its behavior like auto sliding, pause timer when hovering and many slots to manage the content.
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