React image gallery, react slideshow carousel, react content rotator
npm install react-alice-carousel-sensitivity-fixapacheconfig
npm install react-alice-carousel --save-dev
`
$3
`
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
`javascript
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 (
)
}
`
$3
#### Props
* items : Array, default [] - gallery items, preferable to use this property instead of children
* duration : Number, default 250 - Duration of slides transition (milliseconds)
* responsive : Object, default {} - Number of items in the slide
`js
{
0: {
items: 1
},
1024: {
items: 3
}
}
`
* stagePadding : Object, default {} - Padding left and right on the stage
`js
{
paddingLeft: 0, // in pixels
paddingRight: 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, default false - Disable swipe handlers
* mouseDragEnabled : Boolean, default false - Enable mouse drag animation
_To Avoid unexpected behavior you should handle drag event independently, something like in an example_
* infinite : Boolean, default true - Disable infinite mode
* fadeOutAnimation : Boolean, false - Enable fadeout animation. Fired when 1 item is in the slide
* keysControlDisabled : Boolean, default false - Disable keys controls (left, right, space)
* playButtonEnabled : Boolean, default false - Disable play/pause button
* autoPlay : Boolean, default false - Set auto play mode
* autoPlayInterval : Number, default 250 - Interval of auto play animation (milliseconds). If specified, a larger value will be taken from comparing this property and the duration one
* autoPlayDirection : String, default ltr - To run auto play in the left direction specify rtl value
* disableAutoPlayOnAction : Boolean, default false - If this property is identified as true auto play animation will be stopped after clicking user on any gallery button
* stopAutoPlayOnHover : Boolean, default true - If this property is identified as false auto play animation won't stopped on hover
* showSlideInfo : Boolean, default false - Show slide info
* preventEventOnTouchMove : Boolean, default false - 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 object
_All functions return the next object_
`js
{
item: index, // index of the current items position
s position
itemsInSlide: number // number of elements in the slide
}
`
$3
`javascript
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) => ({i}
)),
}
responsive = {
0: { items: 1 },
1024: { items: 2 },
}
onSlideChange(e) {
console.debug('Items position during a change: ', e.item)
s position during a change: ', e.slide)
}
onSlideChanged(e) {
console.debug('Items position after changes: ', e.item)
s position after changes: ', e.slide)
}
render() {
return (
items={this.state.galleryItems}
responsive={this.responsive}
autoPlayInterval={2000}
autoPlayDirection="rtl"
autoPlay={true}
fadeOutAnimation={true}
mouseDragEnabled={true}
playButtonEnabled={true}
disableAutoPlayOnAction={true}
onSlideChange={this.onSlideChange}
onSlideChanged={this.onSlideChanged}
/>
)
}
}
`
#### Custom Prev / Next buttons, dots / thumbs navigation:
* Using - _refs_.
`javascript
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) => ({i}
))
}
thumbItem = (item, i) => (
this.Carousel._onDotClick(i)}>*
)
render() {
return (
dotsDisabled={true}
buttonsDisabled={true}
items={this.state.galleryItems}
ref={(el) => (this.Carousel = el)}
/>
)
}
}
`
* Using _props_
`javascript
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) => this.slideTo(i)}>*
galleryItems() {
return this.items.map((i) => {i}
)
}
render() {
const { galleryItems, responsive, currentIndex } = this.state
return (
dotsDisabled={true}
buttonsDisabled={true}
items={galleryItems}
responsive={responsive}
slideToIndex={currentIndex}
onSlideChanged={this.onSlideChanged}
/>
{this.items.map(this.thumbItem)}
)
}
}
`
###### Example for _slidePrev/slideNext_ page
`javascript
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) => {i + 1}
)
)
}
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 (
items={galleryItems}
slideToIndex={currentIndex}
responsive={responsive}
onInitialized={this.handleOnSlideChange}
onSlideChanged={this.handleOnSlideChange}
onResized={this.handleOnSlideChange}
/>
)
}
}
`
$3
#### Clone
`apacheconfig
git clone https://github.com/maxmarinich/react-alice-carousel
cd react-alice-carousel
`
#### Run
`apacheconfig
npm i
npm start
`
#### Test
`apacheconfig
npm test
``