# carousel for react

![preview](preview.gif)

**install**

`npm install --save-dev pagination-react style-loader css-loader`

**webpack.config.js**

```
// add loader
{
    test: /\.css$/,
    loader: "style-loader!css-loader"
}
```

**import**

`import Carousel from 'carousel-react'`

**use**

```
<Carousel
    previous='./p_l.png'
    next='./p_r.png'
    countDown={1}
    bannerClick={item => console.log(item)}
    setCarouselRestart={handle => this.carouselRestart = handle}
    banners={['3.jpg',
    '1.jpg',
    '2.jpg',
    '3.jpg',
    '1.jpg']}/>
or
<Carousel
    previous='./p_l.png'
    next='./p_r.png'
    countDown={1}
    imgKey='imgUrl'
    bannerClick={item => console.log(item)}
    setCarouselRestart={handle => this.carouselRestart = handle}
    banners={[{
        imgUrl: '3.jpg'
        },
    {
        imgUrl: '1.jpg'
        },
    {
        imgUrl: '2.jpg'
        },
    {
        imgUrl: '3.jpg'
        },
    {
        imgUrl: '1.jpg'
        }]}/>
```

> previous: previous img

> next: next img

> countDown: countDown time for auto carousel, optional

> imgKey: how to get img from banners, optional

> banners: array for show, support array with string or object, if object ,must set imgKey

**you must put the origin first item on the last, and put the origin last on the first**

> bannerClick: callback, param is banners's absolute item, optional

> carouselRestart: component's restart func, optional, if you get data later, it will be required
