CarouselComponent

Represents the VueJS Carousel Component.

<ejs-carousel :items='carouselItems'></ejs-carousel>

Properties

animationEffect

CarouselAnimationEffect

Specifies the type of animation effects. The possible values for this property as follows

• None: The carousel item transition happens without animation.
• Slide: The carousel item transition happens with slide animation.
• Fade: The Carousel item transition happens with fade animation.
• Custom: The Carousel item transition happens with custom animation. @default ‘Slide’

autoPlay

boolean

Defines whether the slide transition is automatic or manual.

Defaults to true

buttonsVisibility

CarouselButtonVisibility

Defines how to show the previous, next and play pause buttons visibility. The possible values for this property as follows

• Hidden: Navigation buttons are hidden.
• Visible: Navigation buttons are visible.
• VisibleOnHover: Navigation buttons are visible only when we hover the carousel.

Defaults to ‘Visible’

cssClass

string

Accepts single/multiple classes (separated by a space) to be used for carousel customization.

Defaults to null

dataSource

Record[]

Specifies the datasource for the carousel items.

Defaults to []

enablePersistence

boolean

Enable or disable persisting component’s state between page reloads.

Defaults to false

enableRtl

boolean

Enable or disable rendering component in right to left direction.

Defaults to false

enableTouchSwipe

boolean

Defines whether to enable swipe action in touch devices or not.

Defaults to true

height

string | number

Specifies the height of the Carousel in pixels/number/percentage. The number value is considered as pixels.

Defaults to ‘100%’

htmlAttributes

Record

Accepts HTML attributes/custom attributes to add in individual carousel item.

Defaults to null

indicatorsTemplate

string | function

Accepts the template for indicator buttons.

Defaults to null

indicatorsType

CarouselIndicatorsType

Specifies the type of indicators. The available values for this property are:

• Default: Displays the indicators with a bullet design.
• Dynamic: Applies a dynamic animation design to the indicators.
• Fraction: Displays the slides numerically as indicators.
• Progress: Represents the slides using a progress bar design.

Defaults to ‘Default’

interval

number

Specifies the interval duration in milliseconds for carousel item transition.

Defaults to 5000

itemTemplate

string | function

Specifies the template option for carousel items.

Defaults to null

items

CarouselItemModel[]

Allows defining the collection of carousel item to be displayed on the Carousel.

Defaults to []

locale

string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ”

loop

boolean

Defines whether the slide transitions loop end or not. When set to false, the transition stops at last slide.

Defaults to true

nextButtonTemplate

string | function

Accepts the template for next navigation button.

Defaults to null

partialVisible

boolean

Enables active slide with partial previous/next slides. Slide animation only applicable if the partialVisible is enabled.

Defaults to false

pauseOnHover

boolean

Defines whether the slide transition gets pause on hover or not.

Defaults to true

playButtonTemplate

string | function

Accepts the template for play/pause button.

Defaults to null

previousButtonTemplate

string | function

Accepts the template for previous navigation button.

Defaults to null

selectedIndex

number

Specifies index of the current carousel item.

Defaults to 0

showIndicators

boolean

Defines whether to show the indicator positions or not. The indicator positions allow to know the current slide position of the carousel component.

Defaults to true

showPlayButton

boolean

Defines whether to show play button or not.

Defaults to false

swipeMode

CarouselSwipeMode

Specifies whether the slide transition should occur while performing swiping via touch/mouse. The slide swiping is enabled or disabled using bitwise operators. The swiping is disabled using ‘~’ bitwise operator.

• Touch - Enables or disables the swiping action in touch interaction.
• Mouse - Enables or disables the swiping action in mouse interaction.

Defaults to ‘Touch’

width

string | number

Specifies the width of the Carousel in pixels/number/percentage. The number value is considered as pixels.

Defaults to ‘100%’

Methods

destroy

Method for destroy the carousel component.

Returns void

next

Method to transit from the current slide to the next slide.

Returns void

pause

Method to pause the slides programmatically.

Returns void

play

Method to play the slides programmatically.

Returns void

prev

Method to transit from the current slide to the previous slide.

Returns void

Events

slideChanged

EmitType<SlideChangedEventArgs>

The event will be fired after the slide changed.

slideChanging

EmitType<SlideChangingEventArgs>

The event will be fired before the slide change.