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
) - Set a strategy for gallery controls. Dots navigation will be hidden if responsive property is set and 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.
-
items
: Array, default undefined
- Set gallery items, preferable to use this property instead of children.
-
mouseTracking
: Boolean, default false
- Enable mouse drag animation.
-
paddingLeft
: Number, default 0
- Set the gallery offset from the left.
-
paddingRight
: Number, default 0
- Set the gallery offset from the right.
-
responsive
: Object, default undefined
- Set number of items in the slide. The key is the breakpoint (default is the result of: () => window.innerWidth).
{
0: {
items: 1,
},
1024: {
items: 3
}
}
-
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).
-
touchTracking
: Boolean, default true
- Enable touch move animation.
-
touchMoveDefaultEvents
: Boolean, default true
- Enable touch move default events on swiping.
-
onInitialized(e: EventObject)
: Function - Fired as callback after the gallery was created.
-
onResizeEvent(e: Event)
: Function - Fired during resize
event to determine whether the event handler should be called.
-
onResized(e: EventObject)
: Function - Fired as callback after the gallery was resized.
-
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.