Settings

All settings

Name	Type	Default	Description
accessibility	Boolean	true	Enable accessibility.
adaptiveHeight	Boolean	false	Enable adaptive height.
arrows	Boolean	true	Show prev/next arrows.
asNavFor	Object	undefined	Reference of another carousel to sync with.
autoplay	Boolean	false	Enable autoplay.
autoplaySpeed	Number	3000	Autoplay interval in milliseconds.
centerMode	Boolean	false	Enable center mode.
centerPadding	String	'50px'	Center padding in pixels.
cssEase	String	'ease'	CSS easing function.
dots	Boolean	false	Show dots.
draggable	Boolean	true	Enable dragging.
edgeFriction	Number	0.35	Edge friction.
fade	Boolean	false	Enable fade mode.
focusOnSelect	Boolean	false	Enable focus on select.
groupsToScroll	Number	1	Number of groups to scroll.
groupsToShow	Number	1	Number of groups to show.
ignorePrefersReducedMotion	Boolean	false	Ignore prefers-reduced-motion .
infinite	Boolean	true	Enable infinite mode.
initialGroupIndex	Number	0	Initial group index.
lazyLoad	String	'ondemand'	Lazy load mode. Can be 'ondemand', or 'progressive'.
nextArrowLabel	String	'Next'	Next arrow label.
pauseOnFocus	Boolean	true	Pause autoplay on focus.
pauseOnHover	Boolean	true	Pause autoplay on hover.
prevArrowLabel	String	'Previous'	Previous arrow label.
responsive	Array	[]	Responsive settings.
rtl	Boolean	false	Enable right-to-left mode.
slidesPerGroup	Number	1	Number of slides per group.
speed	Number	300	Transition speed in milliseconds.
swipe	Boolean	true	Enable swipe.
swipeToSlide	Boolean	true	Enable swipe to slide.
touchMove	Boolean	true	Enable touch move.
touchThreshold	Number	5	Touch threshold.
useCSSTransitions	Boolean	true	Use CSS transitions.
useCSSTransform	Boolean	true	Use CSS transform.
variableWidth	Boolean	false	Enable variable width.
vertical	Boolean	false	Enable vertical mode.
verticalSwiping	Boolean	false	Enable vertical swiping.
waitForAnimate	Boolean	true	Wait for animation.
widthDetection	String	auto	Use manual or automatic width detection.

accessibility boolean

Default: true

When true, the component can be navigated using the keyboard arrow keys.

adaptiveHeight boolean

Default: false

When true, the height of the carousel will change based on the displayed slide groups' height in the slide track.

arrows boolean

Default: true

When true, the previous and next arrows will be shown.

asNavFor object

Default: undefined

Reference of another carousel to sync with. See As Nav For example.

autoplay boolean

Default: false

When true, the carousel will automatically advance to the next slide. See Auto Play example.

autoplaySpeed number

Default: 3000

Autoplay interval in milliseconds. See Auto Play example.

centerMode boolean

Default: false

When true, the carousel will be in center mode. See Center Mode example.

centerPadding string

Default: '50px'

Padding applied to the sides of the slide track in pixels or other valid CSS length units for center mode. See Center Mode example.

cssEase string

Default: 'ease'

CSS easing function for the animation.

dots boolean

Default: false

When true, the dots (for pagination) will be shown.

draggable boolean

Default: true

When true, the carousel will be draggable by mouse. See also touchMove and swipe.

edgeFriction number

Default: 0.35

Edge friction for swiping. The value should be between 0 and 1.

fade boolean

Default: false

When true, the carousel will be in fade mode. See Fade example.

focusOnSelect boolean

Default: false

When true, the slide will be focused on select (i.e. clicked). See Focus On Select example.

groupsToScroll number

Default: 1

Number of groups to scroll when navigating. See Two Slide Groups Finite example.

groupsToShow number

Default: 1

Number of groups to show. See Concept for more details.

ignorePrefersReducedMotion boolean

Default: false

When true, the carousel will ignore prefers-reduced-motion settings by adding !important to the CSS transitions for the animation to show as expected.

infinite boolean

Default: true

When true, the carousel will be in infinite mode. See One Slide Group Infinite example.

initialGroupIndex number

Default: 0

Initial group index: the index of the group that will be shown first on initial render.

lazyLoad string

Default: undefined

Lazy load mode. Can be 'ondemand', or 'progressive'.

The ondemand mode will only load the next slide when it is in view. The progressive mode will load all slides sequentially on initial render. See Lazy Load example.

nextArrowLabel string

Default: 'Next'

Next arrow label (for accessibility).

pauseOnFocus boolean

Default: true

Pause autoplay when a slide is focused.

pauseOnHover boolean

Default: true

Pause autoplay on hover. See Auto Play example.

prevArrowLabel string

Default: 'Previous'

Previous arrow label (for accessibility).

responsive array

Default: []

Responsive settings. It has the below type:

{
    breakpoint: number
    settings: Partial<Omit<Settings, 'responsive'>>
}

For example, if you want to make the carousel show more groups above 480px, you can do the following:

{
    groupsToShow: 1,
        responsive
:
    [
        {
            breakpoint: 480, // i.e. (min-width: 480px); 480px or more will use the below settings
            settings: {
                groupsToShow: 2
            }
        }
    ]
}

See Responsive example.

rtl boolean

Default: false

Enable right-to-left mode. See rtl example.

slidesPerGroup number

Default: 1

Number of slides to show in one group. See Concept for more details.

speed number

Default: 300

Slide navigation's animation speed in milliseconds.

swipe boolean

Default: true

When false, the carousel will not be draggable by both touch and mouse.

swipeToSlide boolean

Default: false

When true, one can swipe to a particular slide by dragging the track. See Swipe To Slide example.

touchMove boolean

Default: true

Enable dragging by touch. See also draggable and swipe.

touchThreshold number

Default: 5

The bigger the number is, the more sensitive the touch move will be.

useCSSTransitions boolean

Default: true

Enable CSS transitions.

useCSSTransform boolean

Default: true

Enable CSS transform.

variableWidth boolean

Default: false

When true, the slide groups can have different widths based on their slide content.

vertical boolean

Default: false

When true, the carousel will be in vertical mode. See Vertical example.

verticalSwiping boolean

Default: false

Typically used together with vertical. When true, the swipe direction of the carousel becomes vertical. See Vertical example.

waitForAnimate boolean

Default: true

When true, navigation will be disabled until the animation is complete.

widthDetection string

Default: 'auto'

The widthDetection property influences how the carousel adjusts its width. This property supports two modes: auto and manual.

In auto mode, the carousel dynamically expands to occupy the full width of its parent element. This mode ensures the smoothest performance during window resizing events.

However, auto mode may cause the carousel to scale to infinity if the parent element does not have fixed width. This often arises in flex or grid layouts. In such cases, you can fix this problem by either setting a fixed width for the parent element or switching to manual mode.

In manual mode, a width detection step is executed to determine the carousel's width. This mode ensures that the carousel fills its parent element adequately both on mount and after every window resize event. See Flex Layout for an example.

For additional information on this topic, refer to this FAQ.