我用islider都是结合react来使用,主要运用在移动端,做首页轮播图,或者是手机图片预览,左右滑动
首先需要 npm install islider.js --save
让后在jsx文件头部引入一下文件
require('islider.js/build/iSlider.plugin.dot.js');
require('islider.js/build/iSlider.css');
let iSlider = require('islider.js/build/iSlider.js');
然后初始化islider
initISlider() {
let data = [
{
content: '<div class="item">相册</div>'
},
{
content: (function () { var dom = document.createElement('div'); dom.innerHTML = 'Element'; dom.style.cssText = 'font-size:3em;color:rgb(230, 230, 63);'; return dom; })()
},
{
content: '<div class="item">视频</div>'
}
];
this._islider = new iSlider({
dom: this.hotList, // iSlider-wrapper
data, // 显示数据 {Array}
// isVertical: true, // 向上滑动
isLooping: true, // 循环播放模式 {Boolean} 默认false
isAutoplay: false, // 是否自动播放 {Boolean} 默认false
duration: 2000, // 停留时间, precondition: isAutoplay === true
// animateType: 'rotate',
animateTime: 400, // 动画过度时间 {Number}
animateEasing: 'ease-in-out', // 动画过度曲线 // initIndex: 0, // 开始图片索引
plugins: [['dot', {locate: 'relative'}]] // 官方提供插件引入, [点], 文档不全
});
}
初始化之后就可以在生命周期里面调用了
componentDidMount() {
this.initISlider();
}
render() {
return (
<div className='homePage-footer' ref={c => this.hotList = c}>
</div>
);
}
详细应用参考官方文档