showArrows | boolean | true | show prev and next arrows |
showStatus | boolean | true | show index of the current item. i.e: (1/8) |
showIndicators | boolean | true | show little dots at the bottom with links for changing the item |
showThumbs | boolean | true | show thumbnails of the images |
thumbWidth | number | undefined | optionally specify pixel width (as an integer) of a thumbnail (including any padding) to avoid calculating values (helps with server-side renders or page cache issues) |
infiniteLoop | boolean | false | infinite loop sliding |
selectedItem | number | 0 | selects an item though props / defines the initial selected item |
axis | string | horizontal | changes orientation - accepts horizontal and vertical |
verticalSwipe | string | standard | changes vertical swipe scroll direction - accepts standard and natural |
onChange | function | - | Fired when changing positions |
onClickItem | function | - | Fired when an item is clicked |
onClickThumb | function | - | Fired when a thumb it clicked |
width | string | - | Allows to set a fixed width |
useKeyboardArrows | boolean | false | Adds support to next and prev through keyboard arrows |
autoPlay | boolean | false | Auto play |
stopOnHover | boolean | true | Stop auto play while mouse is over the carousel |
interval | number | 3000 | Interval of auto play |
transitionTime | number | 350 | Duration of slide transitions (in miliseconds) |
swipeScrollTolerance | number | 5 | Allows scroll when the swipe movement occurs in a different direction than the carousel axis and within the tolerance - Increase for loose - Decrease for strict |
swipeable | boolean | true | Enables swiping gestures |
dynamicHeight | boolean | false | Adjusts the carousel height if required. -- Do not work with vertical axis -- |
emulateTouch | boolean | false | Allows mouse to simulate swipe |
statusFormatter | func | (current, total) => ${current} of ${total} | Allows custom formatting of the status indicator |
centerMode | boolean | false | Enables centered view with partial prev/next slides. Only works with horizontal axis. |
centerSlidePercentage | number | 80 | optionally specify percentage width (as an integer) of the slides in centerMode |
labels | object [key: string]: string | { leftArrow, rightArrow, item } | optionally specify labels to be applied to controls |
onSwipeStart | function | - | Fired when a swiping gesture has started |
onSwipeEnd | function | - | Fired when a swiping gesture has ended |
onSwipeMove | function | - | Fired when a swiping gesture is happening |
renderArrowPrev | (onClickHandler: () => void, hasPrev: boolean, label: string): React.ReactNode | default arrow | Allows replacement of arrow button previous. |
renderArrowNext | (onClickHandler: () => void, hasNext: boolean, label: string): React.ReactNode | default arrow | Allows replacement of arrow button next. |
renderIndicator | (onClickHandler: () => void, isSelected: boolean, index: number, label: string): React.ReactNode | default indicator | Allows replacement of default indicators |