@cybergab/gab-react-alice-carousel v1.19.26
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
import React from 'react'
import AliceCarousel from 'react-alice-carousel'
import 'react-alice-carousel/lib/alice-carousel.css'
const Gallery = () => {
const handleOnDragStart = (e) => e.preventDefault()
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 event{ 0: { items: 1, }, 1024: { items: 3 } }
stagePadding
: Object, default{}
- Padding left and right on the stage{ paddingLeft: 0, // in pixels paddingRight: 0 }
buttonsDisabled
: Boolean,false
- Disable buttons controldotsDisabled
: Boolean,false
- Disable dots navigationstartIndex
: Number,0
- The starting index of the carouselslideToIndex
: Number,0
- Sets the carousel at the specified positionswipeDisabled
: Boolean, defaultfalse
- Disable swipe handlerstouchTrackingEnabled
: Boolean, defaulttrue
- Enable touch move animationmouseTrackingEnabled
: Boolean, defaultfalse
- Enable mouse drag animationmouseDragEnabled
: 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 exampleinfinite
: Boolean, defaulttrue
- Disable infinite modefadeOutAnimation
: Boolean, defaultfalse
- Enable fadeout animation. Fired when 1 item is in the slidecontrolsStrategy
: String (default
|responsive
), defaultdefault
- Ifresponsive
is specified, dots navigation will be hidden if the number of gallery items is equal to the number of items on the slidekeysControlDisabled
: Boolean, defaultfalse
- Disable keys controls (left, right, space)playButtonEnabled
: Boolean, defaultfalse
- Disable play/pause buttonautoPlay
: Boolean, defaultfalse
- Set auto play modeautoHeight
: Boolean, defaultfalse
- Set auto height modeautoPlayInterval
: Number, default250
- Interval of auto play animation (milliseconds). If specified, a larger value will be taken from comparing this property and theduration
oneautoPlayDirection
: String, defaultltr
- To run auto play in the left direction specifyrtl
valuedisableAutoPlayOnAction
: Boolean, defaultfalse
- If this property is identified astrue
auto play animation will be stopped after clicking user on any gallery buttonstopAutoPlayOnHover
: Boolean, defaulttrue
- If this property is identified asfalse
auto play animation won't stopped on hovershowSlideInfo
: Boolean, defaultfalse
- Show slide infoswipeDelta
: Number, default10
- Minimum distance to the start of the swiping (px)preventEventOnTouchMove
: Boolean, defaultfalse
- Prevent the browser's touchmove event when carousel is swipingpreservePosition
: Boolean, defaultfalse
- Preserve current slide position when resize event firedtransitionTimingFunction
: String, defaultease-out
- Sets how intermediate values are calculated for CSS properties being affected by a transition effect.onSlideChange
: Function - Fired when the event object is changing / returns event objectonSlideChanged
: Function - Fired when the event object was changed / returns event objectonInitialized
: Function - Fired when the gallery was initialized / returns event objectonResized
: Function - Fired when the gallery was resized / returns event objectEvent object example
{ item: index, // index of the current item`s position slide: index, // index of the current slide`s position itemsInSlide: number, // number of elements in the slide isPrevSlideDisabled, // indicator to control the visibility of navigation dots isNextSlideDisabled, }
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 slideslidePrev()
: Go to the prev slideslideNext()
: Go to the next slide
Examples
import React from 'react'
import AliceCarousel from 'react-alice-carousel'
import 'react-alice-carousel/lib/alice-carousel.css'
class Gallery extends React.Component {
state = {
galleryItems: [1, 2, 3].map((i) => <h2 key={i}>{i}</h2>),
}
responsive = {
0: { items: 1 },
1024: { items: 2 },
}
onSlideChange(e) {
console.debug('Item`s position during a change: ', e.item)
console.debug('Slide`s position during a change: ', e.slide)
}
onSlideChanged(e) {
console.debug('Item`s position after changes: ', e.item)
console.debug('Slide`s position after changes: ', e.slide)
}
render() {
return (
<AliceCarousel
items={this.state.galleryItems}
responsive={this.responsive}
autoPlayInterval={2000}
autoPlayDirection="rtl"
autoPlay={true}
fadeOutAnimation={true}
mouseTrackingEnabled={true}
playButtonEnabled={true}
disableAutoPlayOnAction={true}
onSlideChange={this.onSlideChange}
onSlideChanged={this.onSlideChanged}
/>
)
}
}
Custom Prev / Next
buttons, dots / thumbs
navigation:
- Using - refs.
import React from 'react'
import AliceCarousel from 'react-alice-carousel'
import 'react-alice-carousel/lib/alice-carousel.css'
class Gallery extends React.Component {
items = [1, 2, 3, 4, 5]
state = {
galleryItems: this.items.map((i) => <h2 key={i}>{i}</h2>),
}
thumbItem = (item, i) => (
<span key={item} onClick={() => this.Carousel.slideTo(i)}>
*{' '}
</span>
)
render() {
return (
<div>
<AliceCarousel
dotsDisabled={true}
buttonsDisabled={true}
items={this.state.galleryItems}
ref={(el) => (this.Carousel = el)}
/>
<nav>{this.items.map(this.thumbItem)}</nav>
<button onClick={() => this.Carousel.slidePrev()}>Prev button</button>
<button onClick={() => this.Carousel.slideNext()}>Next button</button>
</div>
)
}
}
- Using props
import React from 'react'
import AliceCarousel from 'react-alice-carousel'
import 'react-alice-carousel/lib/alice-carousel.css'
class Gallery extends React.Component {
items = [1, 2, 3, 4, 5]
state = {
currentIndex: 0,
responsive: { 1024: { items: 3 } },
galleryItems: this.galleryItems(),
}
slideTo = (i) => this.setState({ currentIndex: i })
onSlideChanged = (e) => this.setState({ currentIndex: e.item })
slideNext = () => this.setState({ currentIndex: this.state.currentIndex + 1 })
slidePrev = () => this.setState({ currentIndex: this.state.currentIndex - 1 })
thumbItem = (item, i) => <span onClick={() => this.slideTo(i)}>* </span>
galleryItems() {
return this.items.map((i) => <h2 key={i}> {i}</h2>)
}
render() {
const { galleryItems, responsive, currentIndex } = this.state
return (
<div>
<AliceCarousel
dotsDisabled={true}
buttonsDisabled={true}
items={galleryItems}
responsive={responsive}
slideToIndex={currentIndex}
onSlideChanged={this.onSlideChanged}
/>
<ul>{this.items.map(this.thumbItem)}</ul>
<button onClick={() => this.slidePrev()}>Prev button</button>
<button onClick={() => this.slideNext()}>Next button</button>
</div>
)
}
}
Example for slidePrev/slideNext page
import React from 'react'
import AliceCarousel from 'react-alice-carousel'
import 'react-alice-carousel/lib/alice-carousel.css'
class Gallery extends React.Component {
state = {
currentIndex: 0,
itemsInSlide: 1,
responsive: { 0: { items: 3 } },
galleryItems: this.galleryItems(),
}
galleryItems() {
return Array(7)
.fill()
.map((item, i) => <h2 className="item">{i + 1}</h2>)
}
slidePrevPage = () => {
const currentIndex = this.state.currentIndex - this.state.itemsInSlide
this.setState({ currentIndex })
}
slideNextPage = () => {
const {
itemsInSlide,
galleryItems: { length },
} = this.state
let currentIndex = this.state.currentIndex + itemsInSlide
if (currentIndex > length) currentIndex = length
this.setState({ currentIndex })
}
handleOnSlideChange = (event) => {
const { itemsInSlide, item } = event
this.setState({ itemsInSlide, currentIndex: item })
}
render() {
const { currentIndex, galleryItems, responsive } = this.state
return (
<div>
<AliceCarousel
items={galleryItems}
slideToIndex={currentIndex}
responsive={responsive}
onInitialized={this.handleOnSlideChange}
onSlideChanged={this.handleOnSlideChange}
onResized={this.handleOnSlideChange}
/>
<button onClick={this.slidePrevPage}>Prev Page</button>
<button onClick={this.slideNextPage}>Next Page</button>
</div>
)
}
}
Build the project locally
Clone
git clone https://github.com/maxmarinich/react-alice-carousel
cd react-alice-carousel
Run
npm i
npm start
Test
npm test
License
MIT