最近做了PC端改版，要求移动端有更好的体验，一些产品滚屏的展示，就用了swiper插件，以方便用户在移动端访问可以滑动翻屏展示。
本次项目中使用的是swiper2.0版本。
首先要引入swiper的js库和css库（此处不做赘述）
然后在此生成一个swiper实例，以供举例子
var mySwiper = new Swiper('.swiperLookBig', {
pagination: '.pagination',
loop: true,
paginationClickable: true
});
1.swipePrev()和swipeNext()方法，滑动到上一个模块/下一个模块
比如我点击某按钮执行滑到上一模块，就可以这样写:
$('.arrow-left').live('click', function (e) {
e.preventDefault();
mySwiper.swipePrev();
});
2.setWrapperTranslate(x,y,z) 手动设置wrapper的位移
比如我希望swiper向左便宜300px 我就可以这样写：
mySwiper.setWrapperTranslate(-300,0,0); 我在项目中的实际应用是点击小图之后显示相对应的大图，我就计算一下小图对应的index,然后乘以一下大图每屏的宽度 然后来实现对应图片的展示。本来activeLoopIndex可实现，但是可能因为大图
是默认隐藏的元素，对activeLoopIndex的计算不太准确，后来才尝试使用了此方法，效果还不错。
3.activeLoopIndex : 在loop模式下返回当前活动块的索引。
posted on
