开始使用 iSlider

使用iSlider最简单的办法是查阅我们提供的简易例子，请浏览DEMO文件夹中的内容。

创建一個容器

<div id="iSlider-wrapper"></div>

准备一些数据

var data = [
    {content: "imgs/1.jpg"},
    {content: "imgs/2.jpg"},
    {content: "imgs/3.jpg"}
];

载入iSlider

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

初始化一个iSlider

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

也可以

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

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

iSlider 扩展

动画效果

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

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

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

插件

从2.X版本开始，iSlider加入插件注册机制，可以帮助您扩展自己需要的功能

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

var islider = new iSlider({
    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!

【注意】: 通过 npm 安装的iSlider默认不包含插件，在npm下使用插件：

var iSlider = require('islider.js');
require('../node_modules/islider.js/build/iSlider.plugin.button'); //引入button插件

官方提供的插件

button

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

dot

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

zoompic

移动端图片缩放，在图片的非背景模式中，通过对图片双击或双指放大，达到放大预览的效果

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

BIZone

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