carousel-react

carousel for react

install

npm install --save-dev carousel-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