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