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
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