React Alice Carousel
React Alice Carousel is a React component for building content galleries, content rotators and any React carousels.
Features of react-alice-carousel
- Infinite loop
- FadeOut animation
- AutoPlay mode
- Mobile friendly
- Responsive design
- Stage padding
- Swipe to slide
- Start index
- Slide to index
- RTL
- Auto Height
- Keyboard navigation
- Touch and Drag support
- Custom rendered slides
- Custom animation duration
- Multiple items in the slide
- Show / hide anything (indicators, arrows, slides indexes)
- TypeScript type definitions
How to use
npm install react-alice-carousel
Style import
# SCSS
@import "react-alice-carousel/lib/scss/alice-carousel.scss";
# CSS
@import "react-alice-carousel/lib/alice-carousel.css";
# Webpack
import "react-alice-carousel/lib/alice-carousel.css";
Quick start
const Gallery = { const handleOnDragStart = e return <AliceCarousel mouseTrackingEnabled> <img src="/img1" onDragStart=handleOnDragStart className="yours-custom-class" /> <img src="/img2" onDragStart=handleOnDragStart className="yours-custom-class" /> <img src="/img3" onDragStart=handleOnDragStart className="yours-custom-class" /> <img src="/img4" onDragStart=handleOnDragStart className="yours-custom-class" /> <img src="/img5" onDragStart=handleOnDragStart className="yours-custom-class" /> </AliceCarousel> }
Advanced configuration
Props
-
items
: Array, default[]
- gallery items, preferable to use this property instead ofchildren
-
duration
: Number, default250
- Duration of slides transition (milliseconds) -
responsive
: Object, default{}
- Number of items in the slide. Thekey
is the breakpoint (default is the result of:() => window.innerWidth
) for the resize event0:items: 11024:items: 3 -
stagePadding
: Object, default{}
- Padding left and right on the stagepaddingLeft: 0 // in pixelspaddingRight: 0 -
buttonsDisabled
: Boolean,false
- Disable buttons control -
dotsDisabled
: Boolean,false
- Disable dots navigation -
startIndex
: Number,0
- The starting index of the carousel -
slideToIndex
: Number,0
- Sets the carousel at the specified position -
swipeDisabled
: Boolean, defaultfalse
- Disable swipe handlers -
touchTrackingEnabled
: Boolean, defaulttrue
- Enable touch move animation -
mouseTrackingEnabled
: Boolean, defaultfalse
- Enable mouse drag animation -
mouseDragEnabled
: Deprecated from version 1.16.0 (use "mouseTrackingEnabled" instead) Boolean, defaultfalse
- Enable mouse drag animationTo Avoid unexpected behavior you should handle
drag
event independently, something like in an example -
infinite
: Boolean, defaulttrue
- Disable infinite mode -
fadeOutAnimation
: Boolean,false
- Enable fadeout animation. Fired when 1 item is in the slide -
keysControlDisabled
: Boolean, defaultfalse
- Disable keys controls (left, right, space) -
playButtonEnabled
: Boolean, defaultfalse
- Disable play/pause button -
autoPlay
: Boolean, defaultfalse
- Set auto play mode -
autoHeight
: Boolean, defaultfalse
- Set auto height mode -
autoPlayInterval
: Number, default250
- Interval of auto play animation (milliseconds). If specified, a larger value will be taken from comparing this property and theduration
one -
autoPlayDirection
: String, defaultltr
- To run auto play in the left direction specifyrtl
value -
disableAutoPlayOnAction
: Boolean, defaultfalse
- If this property is identified astrue
auto play animation will be stopped after clicking user on any gallery button -
stopAutoPlayOnHover
: Boolean, defaulttrue
- If this property is identified asfalse
auto play animation won't stopped on hover -
showSlideInfo
: Boolean, defaultfalse
- Show slide info -
preventEventOnTouchMove
: Boolean, defaultfalse
- Prevent the browser's touchmove event when carousel is swiping -
onSlideChange
: Function - Fired when the event object is changing / returns event object -
onSlideChanged
: Function - Fired when the event object was changed / returns event object -
onInitialized
: Function - Fired when the gallery was initialized / returns event object -
onResized
: Function - Fired when the gallery was resized / returns event objectEvent object example
item: index // index of the current item`s positionslide: index // index of the current slide`s positionitemsInSlide: number // number of elements in the slide -
shouldHandleResizeEvent
: Function - Fired during resize event to determine whether the event handler should be called / returns boolean
Methods
-
slideTo(index: number)
: Go to the specified slide -
slidePrev()
: Go to the prev slide -
slideNext()
: Go to the next slide
Examples
Component state = galleryItems: 1 2 3 responsive = 0: items: 1 1024: items: 2 { console console } { console console } { return <AliceCarousel items=thisstategalleryItems responsive=thisresponsive autoPlayInterval=2000 autoPlayDirection="rtl" autoPlay=true fadeOutAnimation=true mouseTrackingEnabled=true playButtonEnabled=true disableAutoPlayOnAction=true onSlideChange=thisonSlideChange onSlideChanged=thisonSlideChanged /> }
Prev / Next
buttons, dots / thumbs
navigation:
Custom - Using - refs.
Component items = 1 2 3 4 5 state = galleryItems: thisitems <span key=item onClick= thisCarousel> *' ' </span> { return <div> <AliceCarousel dotsDisabled=true buttonsDisabled=true items=thisstategalleryItems ref= thisCarousel = el /> <nav>thisitems</nav> <button onClick= thisCarousel>Prev button</button> <button onClick= thisCarousel>Next button</button> </div> }
- Using props
Component items = 1 2 3 4 5 state = currentIndex: 0 responsive: 1024: items: 3 galleryItems: this this this this this <span onClick= this>* </span> { return thisitems } { const galleryItems responsive currentIndex = thisstate return <div> <AliceCarousel dotsDisabled=true buttonsDisabled=true items=galleryItems responsive=responsive slideToIndex=currentIndex onSlideChanged=thisonSlideChanged /> <ul>thisitems</ul> <button onClick= this>Prev button</button> <button onClick= this>Next button</button> </div> }
Example for slidePrev/slideNext page
Component state = currentIndex: 0 itemsInSlide: 1 responsive: 0: items: 3 galleryItems: this { return Array7 } { const currentIndex = thisstatecurrentIndex - thisstateitemsInSlide this } { const itemsInSlide galleryItems: length = thisstate let currentIndex = thisstatecurrentIndex + itemsInSlide if currentIndex > length currentIndex = length this } { const itemsInSlide item = event this } { const currentIndex galleryItems responsive = thisstate return <div> <AliceCarousel items=galleryItems slideToIndex=currentIndex responsive=responsive onInitialized=thishandleOnSlideChange onSlideChanged=thishandleOnSlideChange onResized=thishandleOnSlideChange /> <button onClick=thisslidePrevPage>Prev Page</button> <button onClick=thisslideNextPage>Next Page</button> </div> }
Build the project locally
Clone
git clone https://github.com/maxmarinich/react-alice-carouselcd react-alice-carousel
Run
npm inpm start
Test
npm test
License
MIT