Skip to content

settings.md

Latest commit

 

History

History
355 lines (217 loc) · 15.4 KB

settings.md

File metadata and controls

355 lines (217 loc) · 15.4 KB

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.
infiniteLoopOnEdge Boolean false Enable infinite loop on edge.
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.
responsiveBehavior String 'mobile-first' How responsive queries behave
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.
unslick Boolean false Unslick the carousel.
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

Default: true

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

adaptiveHeight

Default: false

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

arrows

Default: true

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

asNavFor

Default: undefined

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

autoplay

Default: false

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

autoplaySpeed

Default: 3000

Autoplay interval in milliseconds. See Auto Play example.

centerMode

Default: false

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

centerPadding

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

Default: 'ease'

CSS easing function for the animation.

dots

Default: false

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

draggable

Default: true

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

edgeFriction

Default: 0.35

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

fade

Default: false

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

focusOnSelect

Default: false

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

groupsToScroll

Default: 1

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

groupsToShow

Default: 1

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

ignorePrefersReducedMotion

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

Default: true

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

infiniteLoopOnEdge

Default: false

When true, the carousel will loop infinitely on the edge. See Infinite Loop On Edge

initialGroupIndex

Default: 0

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

lazyLoad

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

Default: 'Next'

Next arrow label (for accessibility).

pauseOnFocus

Default: true

Pause autoplay when a slide is focused.

pauseOnHover

Default: true

Pause autoplay on hover. See Auto Play example.

prevArrowLabel

Default: 'Previous'

Previous arrow label (for accessibility).

responsiveBehavior

Default: 'mobile-first'

Defines how to apply responsive settings.

With 'mobile-first' the default settings are for mobile view and the responsive options apply for the respective breakpoints as a 'min-width' rule. With 'desktop-first' the default settings are for desktop view and the responsive options apply for the respective breakpoints as a 'max-width' rule.

responsive

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

Default: false

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

slidesPerGroup

Default: 1

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

speed

Default: 300

Slide navigation's animation speed in milliseconds.

swipe

Default: true

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

swipeToSlide

Default: false

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

touchMove

Default: true

Enable dragging by touch. See also draggable and swipe.

touchThreshold

Default: 5

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

unslick

Default: false

When true, the carousel functionality will be disabled. This is useful when you want to show the carousel as a static display.

useCSSTransitions

Default: true

Enable CSS transitions.

useCSSTransform

Default: true

Enable CSS transform.

variableWidth

Default: false

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

vertical

Default: false

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

verticalSwiping

Default: false

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

waitForAnimate

Default: true

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

widthDetection

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.