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

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