Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    carousel-reactpublic

    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

    install

    npm i carousel-react

    Downloadslast 7 days

    4

    version

    1.2.1

    license

    MIT

    repository

    github.com

    last publish

    collaborators

    • avatar