Carousel

To add a slider to a page.

Carousel example

Example of Carousel

APIs

Carousel.Props

AttributeDescriptionTypeAccepted valuesDefault
options?Options for carousel.object--
...native propsHTMLAttributes--

Carousel.Options

AttributeDescriptionTypeAccepted valuesDefault
perPage?Determines the number of slides to display in a page.number-1
type?The type of the carousel.stringslide / loop / fadeslide
rewind?Determines whether to rewind the carousel or not.booleantrue / falsefalse
speed?The transition speed in milliseconds.number-400
rewindSpeed?The transition speed on rewind in milliseconds.number-400
rewindByDrag?Allows to rewind by drag.booleantrue / false-
width?Defines the carousel max width, accepting the CSS format such as 10em, 80vw.number / string--
height?Defines the carousel height, accepting the CSS format except for %.number / string--
fixWidth?Fixes width of slides, accepting the CSS format.number / string--
fixHeight?Fixes Height of slides, accepting the CSS format except for %.number / string--
heightRatio?Determines height of slides by the ratio to the carousel width.number--
autoWidth?If true, the width of slides are determined by their width.booleantrue / falsefalse
autoHeight?If true, the width of slides are determined by their height.booleantrue / falsefalse
start?The start index.number-0
perMove?Determines the number of slides to move at once.number-1
clones?Explicitly determines the number of clones on each side of the carousel.number--
cloneStatus?Determines whether to add the is-active class to clones.booleantrue / falsetrue
focus?Determines which slide should be active if there are multiple slides in a page.number / center-center
gap?The gap between slides. The CSS format is acceptable.number / string--
padding?Sets padding left/right or top/bottom of the carousel. The CSS format is acceptable.number / string--
arrows?Determines whether to create/find arrows or not.booleantrue / falsetrue
pagination?Determines whether to create pagination (indicator dots) or not.booleantrue / falsetrue
paginationKeyboard?Determines whether to enable keyboard shortcuts for pagination when it contains focus.booleantrue / falsetrue
paginationDirection?Explicitly sets the pagination direction.stringltr / rtl / ttb-
easing?The timing function for the CSS transition.easing-cubic-bezier(0.25, 1, 0.5, 1)
easingFunc?The easing function for the drag free mode.Fn--
drag?Determines whether to allow to drag the carousel or not.boolean / freetrue / false / freefree
snap?Snaps the closest slide on drag free mode.booleantrue / falsefalse
dragMinThreshold?The required distance to start moving the carousel by the touch action.number / { mouse: number, touch: number }-10
flickPower?Determines the power of "flick". The larger number this is, the farther the carousel runs.number-600
flickMaxPages?Limits the number of pages to move by the flick action.number-1
waitForTransition?Determines whether to disable any actions while the carousel is transitioning.booleantrue / falsefalse
arrowPath?Changes the arrow SVG path, like 'm7.61 0.807-2.12...'.string--
autoPlay?Determines whether to activate autoplay or not.boolean / pausetrue / false / pausefalse
interval?The autoplay interval in milliseconds.number-5000
pauseOnHover?Determines whether to pause autoplay on mouseover or not.booleantrue / falsetrue
pauseOnFocus?Determines whether to pause autoplay when the carousel contains a focused element or not.booleantrue / falsetrue
resetProgress?Determines whether to reset the autoplay progress when it is requested to start again or not.booleantrue / falsetrue
lazyLoad?Enables lazy loading.boolean / nearby / sequentialtrue / false / nearby / sequentialfalse
preloadPages?Determines how many pages (not slides) around the active slide should be loaded beforehand.number-1
keyboard?Enables keyboard shortcuts.boolean / global / focusedtrue / false / global / focusedfalse
wheel?Enables navigation by the mouse wheel.booleantrue / falsefalse
wheelMinThreshold?The threshold to cut off the small delta produced by inertia scroll.number--
wheelSleep?The sleep duration in milliseconds until accepting next wheel input.number--
releaseWheel?Determines whether to release the wheel event when the carousel reaches the first or last slide.booleantrue / falsefalse
direction?The direction of the carousel.stringltr / rtl / ttbltr
cover?Converts the image src to the css background-image URL of the parent element.booleantrue / falsefalse
slideFocus?Determines whether to add tabindex="0" to visible slides or not.booleantrue / false-
focusableNodes?A selector for focusable nodes inside slides.string-a, button, textarea, input, select, iframe
isNavigation?If true, the carousel makes slides clickable to navigate another carousel.booleantrue / falsefalse
trimSpace?Determines whether to trim spaces before/after the carousel if the focus option is available.boolean / movetrue / false / movetrue
omitEnd?Disables the next arrow when the carousel reaches the last page and omits redundant pagination dots.booleantrue / falsefalse
updateOnMove?Updates the is-active status of slides just before moving the carousel.booleantrue / falsefalse
mediaQuery?If min, the media query for breakpoints will be min-width, or otherwise, max-width.stringmin / maxmax
live?Enables a live region.booleantrue / falsetrue
breakpoints?The collection of responsive options for specific breakpoints.Record<string | number, ResponsiveOptions>--
reducedMotion?Options used when the (prefers-reduced-motion: reduce) is detected.{}--
classes?The collection of class names.number-1
i18n?The collection of i18n strings.Record<string, string>--
destroy?Destroys the carousel.boolean / completelytrue / false / completelyfalse
noDrag?The selector for nodes that cannot be dragged.string--
...native propsHTMLAttributes--