创建一個容器

准备一些数据

    {content: "imgs/1.jpg"},
    {content: "imgs/2.jpg"},
];

载入iSlider

<script src="iSlider.min.js"></script>

初始化一个iSlider

var islider = new iSlider(document.getElementById('iSlider-wrapper'), data);

也可以

var islider = new iSlider(document.getElementById('iSlider-wrapper'), data, {
    dom : document.getElementById('iSlider-wrapper'),
    data : data
});

动画效果

如果您想加入更多效果，可以载入效果扩展库，并在初始化时配置参数，指定animateType

<script src="iSlider.animate.min.js"></script>

var islider = new iSlider({
    dom: document.getElementById("iSlider-wrapper"),
    data: list,
    isVertical: true,
    isLooping: false,
    isDebug: true,
    animateType: 'rotate'
});

插件

    dom: document.getElementById("iSlider-wrapper"),
    data: list,
    plugins: ['dot'],
});

当然还可以为插件的初始化传递更多的自定义参数

var islider = new iSlider({
    dom: document.getElementById("iSlider-wrapper"),
    data: list,
    plugins: [['dot', {background:'rgba(0,0,0,0)'}]],
});

That’s it!

var iSlider = require('islider.js');

官方提供的插件

button

场景切换按钮，用于切换到前（上）或后（下）一场景

dot

场景指示器，当前所处的位置及切换到某一场景功能

zoompic

• 已知的问题：恢复默认尺寸必须通过双击，双指缩小目前无法回到默认状态

BIZone

触控点边缘脱离识别区，虽然已经加入了mouseout和touchcancel的边缘处理，但是对于某些应用里，自定义的顶部（底部）菜单栏依然无能为力。识别区的意义在于可以主动的设置这些区域达到触摸脱离的效果。