1.0.0 • Published 4 years ago
rmc-touch-slider v1.0.0
rc-touch-slider
rc-touch-slider UI component for React
Install
npm install --save rc-touch-sliderUsage
There are three styles
1、conventional
import Slider from 'rc-touch-slider';
<Slider>
<Slider.Item><img src={require('./81598333_p0.jpg')} /></Slider.Item>
<Slider.Item><img src={require('./81598333_p0.jpg')} /></Slider.Item>
<Slider.Item><img src={require('./81598333_p0.jpg')} /></Slider.Item>
<Slider.Item><img src={require('./81598333_p0.jpg')} /></Slider.Item>
</Slider>2、Thumbnail
import Slider from 'rc-touch-slider';
const data = [
{
thumb: require('./81598333_p0.jpg'),
img: require('./81598333_p0.jpg')
},
{
thumb: require('./81598333_p0.jpg'),
img: require('./81598333_p0.jpg')
},
{
thumb: require('./81598333_p0.jpg'),
img: require('./81598333_p0.jpg')
},
{
thumb: require('./81598333_p0.jpg'),
img: require('./81598333_p0.jpg')
}];
<Slider controls={false}>
{
data.map(function (item, i) {
return (
<Slider.Item key={i} thumbnail={item.thumb}>
<img src={item.img} />
</Slider.Item>
);
})
}
</Slider>3、Text
import Slider from 'rc-touch-slider';
const data = [
{
desc: '这是一张图片标题1',
img: require('./81598333_p0.jpg')
},
{
desc: '这是一张图片标题1',
img: require('./81598333_p0.jpg')
},
{
desc: '这是一张图片标题1',
img: require('./81598333_p0.jpg')
},
{
desc: '这是一张图片标题1',
img: require('./81598333_p0.jpg')
}];
<Slider controls={false}>
{
data.map(function (item, i) {
return (
<Slider.Item key={i} caption={item.desc}></Slider.Item>
);
})
}
</Slider>API
Slider Props
| Name | Type | Default | Description |
|---|---|---|---|
| controls | boolean | true | Whether to display the "Page Turn" button |
| pager | boolean | true | Whether to display "page break" |
| interval | number | 2000ms | Carousel interval |
| autoPlay | boolean | true | Whether to play automatically |
| infinite | boolean | true | Whether loop |
| defaultActiveIndex | number | -- | Slide number activated by default |
| onAction | (index: number, direction:string):void | -- | Callback function after slide transition, accept two parameters (index, direction), index is the slide number, direction is the scroll direction |
| prevIcon | React.ReactNode | -- | Previous button icon |
| nextIcon | React.ReactNode | -- | Next button icon |
Slider.Item Props
| Name | Type | Default | Description |
|---|---|---|---|
| caption | React.ReactNode | -- | Slide title |
| thumbnail | React.ReactNode | -- | Slide thumbnail URL, after setting thumbnail, pagination dots will be replaced with thumbnails |