islider结合react的简单实用

我用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>

        );

    }

详细应用参考官方文档

巴特西

islider结合react的简单实用

最新文章

热门文章