@adactiveasia/react-alice-carousel
v0.0.1
Published
React image gallery, react slideshow carousel, react content rotator
Downloads
4
Maintainers
Readme
React Alice Carousel
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
Features
- 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
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} 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} />
);
}
Options
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
- Set number of items in the slide. The key is the breakpoint (default is the result of: () => window.innerWidth orinnerWidth
property if the last presented).{ 0: { items: 1, }, 1024: { items: 3 } }
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.
Methods
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.
Types
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)
}
CSS classes
.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
CSS modifiers
.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
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