swiper使用中一些点的总结

 最近做了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模式下返回当前活动块的索引。

 

 

　

　　

　　

转载于:https://www.cnblogs.com/shimeng123/p/9519046.html