React Alice Carousel is a React component for building content galleries, content rotators and any React carousels.
-
activeIndex : Number, default 0 - Set carousel at the specified position.
-
animationDuration: Number, default 400 - Set duration of animation.
-
animationEasingFunction: String or Function, default ease - Property sets how an animation progresses through the duration of each cycle.
-
animationType: String(slide, fadeout), default slide - Set type of animation.
-
autoHeight: Boolean, default false - Set auto height mode.
-
autoWidth: Boolean, default false - Set auto width mode.
-
autoPlay: Boolean, default false - Set autoplay mode.
-
autoPlayControls: Boolean, default false - Show/hide play/pause buttons.
-
autoPlayDirection: String(ltr, rtl), default ltr - Set autoplay direction value.
-
autoPlayInterval: Number, default 400 - Set autoplay interval value.
-
autoPlayStrategy: String(default, action, all, none) - Set a strategy for autoplay mode
default - pause automatic playback on the hoveraction - stop automatic playback if user action was detectedall - merge default && action strategiesnone - ignore any user actions when the autoPlay property was specified
-
controlsStrategy: String (default, responsive, alternate or combined string "default,alternate") - Set a strategy for gallery controls.
default - use controls as isalternate - show each dot for each slideresponsive - navigation will be hidden if the number of gallery elements is equal to the number of items in the slide.
-
disableButtonsControls: Boolean, default false - Disable buttons controls.
-
disableDotsControls: Boolean, default false - Disable dots controls.
-
disableSlideInfo: Boolean, default true - Disable information about current slide.
-
infinite: Boolean, default false - Set infinite mode.
-
innerWidth: Number, default 0 - Set a static value for a breakpoint(key) of the "responsive" property. For example, if you can't use 'window.innerWidth' during SSR.
-
items: Array, default undefined - Set gallery items, preferable to use this property instead of children.
-
keyboardNavigation: Boolean, default false - Enable keyboard navigation
ArrowLeft - go to the prev slideArrowRight - go to the next slideSpace - run/stop autoplay mode if autoPlay property is equal true
-
mouseTracking: Boolean, default false - Enable mouse drag animation. Consider the problem with links, see the example of using the <Link/> component below.
-
paddingLeft: Number, default 0 - Set the gallery offset from the left.
-
paddingRight: Number, default 0 - Set the gallery offset from the right.
-
renderKey: Number, default undefined - Auxiliary property, allows call the render method without changing the state inside the gallery instance.
-
responsive: Object, default undefined - The key is the breakpoint (default is the result of: () => window.innerWidth or innerWidth property if the last presented).
-
items - set number of items in the slide. Default: 1
-
itemsFit: one of (contain | fill | undefined) - defines, how item should fill the container according slide's width. Default: fill.
If contain is specified, the gallery will use the value from the items property to determine the width of the element for each slide and fill in the empty space as needed.
{
0: {
items: 1,
},
1024: {
items: 3,
itemsFit: 'contain',
}
}
-
syncStateOnPropsUpdate: Boolean, default true - Sync some props (like activeIndex) with carousel state while new props passed. This allows you to avoid resetting the carousel position while updating the props (e.g.: children or items).
-
swipeDelta: Number, default 20 - Set minimum distance to the start of the swiping (px).
-
swipeExtraPadding: Number, default 200 - Set maximum distance from initial place before swipe action will be stopped (px).
-
ssrSilentMode: Boolean, default true - Disable classnames modifiers for server side rendering.
-
touchTracking: Boolean, default true - Enable touch move animation.
-
touchMoveDefaultEvents: Boolean, default true - Enable touch move default events on swiping. If false was specified, this prevents vertical scrolling of the parent elements during the swipe.
-
onInitialized(e: EventObject): Function - Fired as callback after the gallery was created.
-
onResizeEvent(e: Event): Function, default shouldProcessResizeEvent method - Fired during the "resize" event to determine whether to call the event handler. Default method checks is the root element width has changed.
-
onResized(e: EventObject): Function - Fired as callback after the gallery was resized.
-
onUpdated(e: EventObject): Function - Fired as callback after updating the gallery props.
-
onSlideChange(e: EventObject): Function - Fired before the event object changes.
-
onSlideChanged(e: EventObject): Function - Fired after the event object was changed.
-
renderSlideInfo(e: SlideInfo): Rendering function - create a custom component.
-
renderDotsItem(e: DotsItem): Rendering function - create a custom component.
-
renderPrevButton({ isDisabled }): Rendering function - create a custom component.
-
renderNextButton({ isDisabled }): Rendering function - create a custom component.
-
renderPlayPauseButton({ isPlaying }): Rendering function - create a custom component.
