Rat-slider NPM

rat-slider

组件介绍

轮播图组件

demo

import Slider from 'rat-slider';
import View from 'rat-view';
import Picture from 'rat-picture';

const slides = [
    { url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png', text: 'Tape Player Skin Design Competition' },
    { url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg', text: 'Mobile Phone Taobao Skin Call' },
    { url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg', text: 'Design Enabling Public Welfare' },
    { url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg', text: 'Amoy Doll Design Competition' },
];

const itemNodes = slides.map((item, index) => <View key={index} style={{width'100%', height,}}><Picture source={{uri:item.url}} alt={item.text} /></View>);

render(<Slider>{itemNodes}</Slider>, mountNode);

api

参数	说明	类型	默认值
dots	是否显示导航锚点	Boolean	true
dotsStyle	统一修改导航锚点样式	Object	{}
autoplay	是否自动轮播	Boolean	false
autoplaySpeed	动效类型，支持'slide'和'fade'	String	'slide'
animation	轮播间隔时间	number	3000
speed	轮播速度	number	500
arrows	是否显示箭头	Boolean	true
preArrowStyle	箭头样式修改	object	{}
nextArrowStyle	箭头样式修改	object	{}
dotRender	自定义导航锚点 dotsRender={(index, current) => {return {index};}}>	Function
triggerType	锚点导航触发方式可选值: 'click', 'hover'	Enum	'click'
onChange	轮播切换的回调函数签名:Function(index: Number) => void 参数:index: {Number} 幻灯片的索引	Function