react-elastislide

react-elastislide is a customizable React slider component that supports images, videos, or HTML content with smooth elastic scrolling animations and flexible slide types.

Installation

1npm i react-elastislide

Usage

Configuration Options

• slides: IElastiSlide[] – An array of slides to display.
• slideWidth?: number – The width of each slide (optional).
• slideHeight?: number – The height of each slide (optional).
• gap?: number – The gap between each slide (optional).
• animDuration?: number – Duration of the slide animation in seconds (optional).
• animDelay?: number – Delay between slide animations in seconds (optional).
• btnPrev?: any – Custom previous button component (optional).
• btnNext?: any – Custom next button component (optional).
• btnPrevContent?: string – Text content for the previous button (optional).
• btnNextContent?: string – Text content for the next button (optional).
• overflow?: boolean – Whether to allow the slider to overflow (optional).
• classNames?: ElastiSliderClassNames – Custom class names for styling the slider (optional).
• onSlideClicked?: (index: number, slide: IElastiSlide, slides: IElastiSlide[]) => void – Callback triggered when a slide is clicked (optional).
• onFirstScreen?: (slides: IElastiSlide[]) => void – Callback triggered when the first screen is visible (optional).
• onLastScreen?: (slides: IElastiSlide[]) => void – Callback triggered when the last screen is visible (optional).
• onScreenChanged?: (currentStep:number,totalSteps:number,slides: IElastiSlide[]) => void - Callback triggered when screen is changed (optional).

Example

1const esliderConfig: ElastiSliderProps = {
2    slides: [
3        { src: 'img_1.png', type: ElastiSlideType.Image },
4        { src: 'img_2.png', type: ElastiSlideType.Image },
5        { src: 'img_3.png', type: ElastiSlideType.Image }
6    ],
7    slideWidth: 300,
8    slideHeight: 300,
9    gap: 40,
10    animDuration: 0.35,
11    animDelay: 0.075,
12    overflow: true,
13    classNames: {
14        container: 'eslider-container',
15        arrows: 'eslider-arrows',
16        arrow: 'eslider-arrow',
17        arrowPrev: 'prev',
18        arrowNext: 'next',
19        hidden: 'hidden',
20        slider: 'eslider',
21        slide: 'eslide',
22        slideContent: 'eslide-content',
23    },
24    onSlideClicked: (index: number, slide: IElastiSlide, slides: IElastiSlide[]) => {
25        console.log(`Slide clicked: ${index}`, slide);
26    }
27};
28
29<ElastiSlider {...esliderConfig} />