React Alice Carousel
React Alice Carousel is a React component for building content galleries, content rotators and any React carousels.
👉 Live demo: v2.x.x
👉 Previous version: v1.x.x
Features
- Auto Height
- Auto Play
- Auto Width
- Custom animation modes
- Custom rendered slides
- Infinite loop
- Mobile friendly
- Multiple items in the slide
- Responsive design
- Stage padding
- Show / hide anything (indicators, arrows, slides indexes)
- Swipe to slide
- Touch and Drag support
- TypeScript
Installation
npm i react-alice-carousel
Style import
# CSS
@import "react-alice-carousel/lib/alice-carousel.css";
# SCSS
@import "react-alice-carousel/lib/scss/alice-carousel.scss";
Usage
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} className="yours-custom-class" />,
<img src="path-to-img" onDragStart={handleDragStart} className="yours-custom-class" />,
<img src="path-to-img" onDragStart={handleDragStart} className="yours-custom-class" />,
];
const Gallery = () => {
return (
<AliceCarousel mouseTracking items={items} />
);
}
Options
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
) - Set a strategy for gallery controls. Dots navigation will be hidden if responsive property is set and 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.items
: Array, default undefined
- Set gallery items, preferable to use this property instead of children.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.responsive
: Object, default undefined
- Set number of items in the slide. The key is the breakpoint (default is the result of: () => window.innerWidth).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).touchTracking
: Boolean, default true
- Enable touch move animation.touchMoveDefaultEvents
: Boolean, default true
- Enable touch move default events on swiping.onInitialized
: Function - Fired as callback after the gallery was created.onResizeEvent
: Function - Fired during resize
event to determine whether the event handler should be called.onResized
: Function - Fired as callback after the gallery was resized.onSlideChange
: Function - Fired while the event object is changing.onSlideChanged
: Function - Fired after the event object was changed.
Methods
slidePrev(e: any) => void
: Go to the prev slide.slideNext(e: any) => void
: Go to the next slide.slideTo(activeIndex?: number) => void
: Go to the specified slide.
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