React Alice Carousel is a React component for building content galleries, content rotators and any React carousels.
👉 Live demo (API): v2.x.x
👉 Previous version (API): v1.x.x
- Auto Height
- Auto Play
- Auto Width
- Custom animation modes
- Custom rendered slides
- Infinite loop
- Lazy loading
- Mobile friendly
- Multiple items in the slide
- Responsive design
- Stage padding
- Show / hide anything (indicators, arrows, slides indexes)
- Swipe to slide
- Server side rendering friendly
- Touch and Drag support
- TypeScript
npm i react-alice-carousel
# CSS
@import "react-alice-carousel/lib/alice-carousel.css";
# SCSS
@import "react-alice-carousel/lib/scss/alice-carousel.scss";
import React from 'react';
import AliceCarousel from 'react-alice-carousel';
import 'react-alice-carousel/lib/alice-carousel.css';
const handleDragStart = (e) => e.preventDefault();
const items = [
<img src="path-to-img" onDragStart={handleDragStart} role="presentation" />,
<img src="path-to-img" onDragStart={handleDragStart} role="presentation" />,
<img src="path-to-img" onDragStart={handleDragStart} role="presentation" />,
];
const Gallery = () => {
return (
<AliceCarousel mouseTracking items={items} />
);
}
-
activeIndex
: Number, default0
- Set carousel at the specified position. -
animationDuration
: Number, default400
- Set duration of animation. -
animationEasingFunction
: String or Function, defaultease
- Property sets how an animation progresses through the duration of each cycle. -
animationType
: String(slide
,fadeout
), defaultslide
- Set type of animation. -
autoHeight
: Boolean, defaultfalse
- Set auto height mode. -
autoWidth
: Boolean, defaultfalse
- Set auto width mode. -
autoPlay
: Boolean, defaultfalse
- Set autoplay mode. -
autoPlayControls
: Boolean, defaultfalse
- Show/hideplay/pause
buttons. -
autoPlayDirection
: String(ltr
,rtl
), defaultltr
- Set autoplay direction value. -
autoPlayInterval
: Number, default400
- Set autoplay interval value. -
autoPlayStrategy
: String(default
,action
,all
,none
) - Set a strategy for autoplay modedefault
- pause automatic playback on the hoveraction
- stop automatic playback if user action was detectedall
- mergedefault
&&action
strategiesnone
- ignore any user actions when theautoPlay
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, defaultfalse
- Disable buttons controls. -
disableDotsControls
: Boolean, defaultfalse
- Disable dots controls. -
disableSlideInfo
: Boolean, defaulttrue
- Disable information about current slide. -
infinite
: Boolean, defaultfalse
- Set infinite mode. -
innerWidth
: Number, default0
- 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, defaultundefined
- Set gallery items, preferable to use this property instead of children. -
keyboardNavigation
: Boolean, defaultfalse
- Enable keyboard navigationArrowLeft
- go to the prev slideArrowRight
- go to the next slideSpace
- run/stop autoplay mode ifautoPlay
property is equaltrue
-
mouseTracking
: Boolean, defaultfalse
- Enable mouse drag animation. -
paddingLeft
: Number, default0
- Set the gallery offset from the left. -
paddingRight
: Number, default0
- Set the gallery offset from the right. -
renderKey
: Number, defaultundefined
- Auxiliary property, allows call the render method without changing the state inside the gallery instance. -
responsive
: Object, defaultundefined
- The key is the breakpoint (default is the result of: () => window.innerWidth orinnerWidth
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 theitems
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', } }
-
-
swipeDelta
: Number, default20
- Set minimum distance to the start of the swiping (px). -
swipeExtraPadding
: Number, default200
- Set maximum distance from initial place before swipe action will be stopped (px). -
ssrSilentMode
: Boolean, defaulttrue
- Disable classnames modifiers for server side rendering. -
touchTracking
: Boolean, defaulttrue
- Enable touch move animation. -
touchMoveDefaultEvents
: Boolean, defaulttrue
- Enable touch move default events on swiping. Iffalse
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.
slidePrev(e: Event) => void
: Go to the prev slide.slideNext(e: Event) => void
: Go to the next slide.slideTo(activeIndex?: number) => void
: Go to the specified slide.
type EventObject = {
item: number;
slide: number;
itemsInSlide: number;
isPrevSlideDisabled: boolean;
isNextSlideDisabled: boolean;
type: EventType;
};
type SlideInfo = {
item: number;
itemsCount: number;
};
type DotsItem = {
isActive: boolean;
activeIndex: number;
};
enum EventType {
ACTION = 'action', // used if a general user action (button click or swipe)
INIT = 'init', // used if the initial event was triggered
RESIZE = 'resize', // used if the gallery size was changed
UPDATE = 'update', // used if the gallery was updated with props (activeIndex)
}
.alice-carousel
.alice-carousel__stage
.alice-carousel__stage-item
.alice-carousel__prev-btn
.alice-carousel__prev-btn-item
.alice-carousel__next-btn
.alice-carousel__next-btn-item
.alice-carousel__play-btn
.alice-carousel__play-btn-item
.alice-carousel__dots
.alice-carousel__dots-item
.alice-carousel__slide-info
.alice-carousel__slide-info-item
.alice-carousel.__ssr
.alice-carousel__stage-item.__active
.alice-carousel__stage-item.__cloned
.alice-carousel__stage-item.__target
.alice-carousel__next-btn-item.__inactive
.alice-carousel__prev-btn-item.__inactive
.alice-carousel__play-btn-item.__pause
.alice-carousel__dots-item.__active
.alice-carousel__dots-item.__custom
.alice-carousel__slide-info-item.__separator
git clone https://github.com/maxmarinich/react-alice-carousel
cd react-alice-carousel
npm ci
npm start
npm test
MIT