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.
-
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
- Set number of items in the slide. The key is the breakpoint (default is the result of: () => window.innerWidth or innerWidth
property if the last presented).
{
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).
-
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 - Fired during the "resize" event to determine whether to call the event handler. Default result of () => true
;
-
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.