React Keshan Carousel

React Keshan Carousel is a React component for building content galleries, content rotators and any React carousels. It is actually react-alice-carousel with several patches.

Features of react-keshan-carousel

• Infinite loop
• FadeOut animation
• AutoPlay mode
• Mobile friendly
• Responsive design
• Swipe to slide
• Start index
• Slide to index
• RTL
• Keyboard navigation
• Touch and Drag support
• Custom rendered slides
• Custom animation duration
• Multiple items in the slide
• Show / hide anything (indicators, arrows, slides indexes)

How to use

1npm install react-keshan-carousel --save-dev

Style import

# SCSS
@import "react-keshan-carousel/lib/keshan-carousel.scss";

# CSS
@import "react-keshan-carousel/lib/keshan-carousel.css";

# Webpack
import "react-keshan-carousel/lib/keshan-carousel.css";

Quick start

1import React from 'react';
2import KeshanCarousel from 'react-keshan-carousel';
3
4
5const Gallery = () => (
6  <KeshanCarousel>
7    <img src="/img1" className="yours-custom-class" />
8    <img src="/img2" className="yours-custom-class" />
9    <img src="/img3" className="yours-custom-class" />
10    <img src="/img4" className="yours-custom-class" />
11    <img src="/img5" className="yours-custom-class" />
12  </KeshanCarousel>
13)

Advanced configuration

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

  1  {
  2      0: {
  3          items: 1
  4      },
  5      1024: {
  6          items: 3
  7      }
  8  }

• 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

• 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

• autoPlayActionDisabled : 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

• showSlideIndex : Boolean, default false - Show slide info

• onSlideChange : Function - Fired when the event object is changing / returns event object

• onSlideChanged : Function - Fired when the event object was changed / returns event object

  Both functions return next object

  1  {
  2      item: index,   // index of the item`s position
  3      slide: index   // index of the slide`s position
  4  }

Examples

1import React from 'react';
2import KeshanCarousel from 'react-keshan-carousel';
3
4
5class Gallery extends React.Component {  
6  responsive = {
7    0: { items: 1 },
8    600: { items: 2 },
9    1024: { items: 3 },
10  };
11
12  onSlideChange(e) {
13    console.log('Item`s position during a change: ', e.item);
14    console.log('Slide`s position during a change: ', e.slide);
15  };
16
17  onSlideChanged(e) {
18    console.log('Item`s position after changes: ', e.item);
19    console.log('Slide`s position after changes: ', e.slide);
20  };
21
22  galleryItems() {
23    return (
24      [1, 2, 3, 4, 5].map((item, i) => (
25        <div key={`key-${i}`} className="yours-custom-class"><h2>{item}</h2></div>
26      ))
27    )
28  };
29
30  render() {
31    const items = this.galleryItems();
32
33    return (
34      <KeshanCarousel
35        items={items}
36        duration={400}
37        autoPlay={true}
38        startIndex = {1}
39        fadeOutAnimation={true}
40        mouseDragEnabled={true}
41        playButtonEnabled={true}
42        autoPlayInterval={2000}
43        autoPlayDirection="rtl"
44        responsive={this.responsive}
45        autoPlayActionDisabled={true}
46        onSlideChange={this.onSlideChange}
47        onSlideChanged={this.onSlideChanged}
48      />
49    );
50  }
51}

Custom Prev / Next buttons, dots / thumbs navigation:

• Using - refs.

1import React from 'react';
2import KeshanCarousel from 'react-keshan-carousel';
3
4
5class Gallery extends React.Component {  
6  items = [1, 2, 3, 4, 5];
7
8  galleryItem = (item, i) => (
9    <div key={`key-${i}`} className="yours-custom-class"><h2>{item}</h2></div>
10  )
11
12  thumbItem = (item, i) => (
13    <li key={i} onClick={() => this.Carousel._onDotClick(i)}>Thumb {item}</li>
14  )
15
16  render() {
17    const items = this.items.map(this.galleryItem)
18
19    return (
20      <div>
21        <h3>Navigation</h3>
22        <ul>{this.items.map(this.thumbItem)}</ul>
23        <button onClick={() => this.Carousel._slidePrev()}>Prev button</button>
24        <button onClick={() => this.Carousel._slideNext()}>Next button</button>
25        <h3>React Keshan Carousel</h3>
26
27        <KeshanCarousel
28          items={items}
29          dotsDisabled={true}
30          buttonsDisabled={true}
31          ref={ el => this.Carousel = el }
32        />
33      </div>
34    );
35  }
36}

• Using props

1import React from 'react';
2import KeshanCarousel from 'react-keshan-carousel';
3
4
5class Gallery extends React.Component {
6  items = [1, 2, 3, 4, 5];
7  state = {
8    currentIndex: 0,
9    responsive: { 1024: { items: 3 }},
10    items: this.items.map(this.galleryItem),
11  };
12
13  slideTo = (i) => this.setState({ currentIndex: i });
14
15  onSlideChanged = (e) => this.setState({ currentIndex: e.item });
16
17  slideNext = () => this.setState({ currentIndex: this.state.currentIndex + 1 });
18
19  slidePrev = () => this.setState({ currentIndex: this.state.currentIndex - 1 });
20
21  thumbItem = (item, i) => (
22    <li key={`key-${i}`} onClick={() => this.slideTo(i)}>Thumb {item}</li>
23  );
24
25  galleryItem = (item, i) => (
26    <div key={`key-${i}`} className="yours-custom-class"><h2>{item}</h2></div>
27  );
28
29  render() {
30    const { items, responsive, currentIndex } = this.state
31    return (
32      <div>
33        <h3>Navigation</h3>
34        <ul>{this.items.map(this.thumbItem)}</ul>
35        <button onClick={() => this.slidePrev()}>Prev button</button>
36        <button onClick={() => this.slideNext()}>Next button</button>
37        <h3>React Keshan Carousel</h3>
38
39        <KeshanCarousel
40          items={items}
41          dotsDisabled={true}
42          buttonsDisabled={true}
43          responsive={responsive}
44          slideToIndex={currentIndex}
45          onSlideChanged={this.onSlideChanged}
46        />
47      </div>
48    );
49  }
50}

Build the project locally

Clone

1git clone https://github.com/keshan3262/react-keshan-carousel
2cd react-keshan-carousel

Run

1npm i
2npm start

License

MIT