node package manager
Stop writing boring code. Discover, share, and reuse within your team. Create a free org ยป

carousel-react

carousel for react

preview

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