swiper-wrapper轮滑组件（多组轮滑界面）无效问题解决

1. 我觉得最难的就是改插件啦，看得懂还好，看不懂只能硬啃了，不过过程还是蛮享受的，毕竟对前端弱鸡来说是get了一个技能点。

2.首先swiper轮滑组件是有很多详细的官网api的，其实有些细节问题一旦爆发出来也是在api里一顿苦找。

   那么言归正传，多组轮滑swiper同时出现时，会有一个初始化问题，当你声明的swiper对象仅为一个时，那么多组轮滑样式就开始各种报错啦

  譬如：左右两边的滑动根本不受width控制，无限延伸，或是点击分页图标无效等。

  

var swiper = new Swiper('.swiper-container', {        pagination: '.swiper-pagination',        slidesPerView: 1,        paginationClickable: true,        spaceBetween: 0,        loop: true    });

以一个可loop循环的轮滑来举例

在多组此种轮滑效果出现时，你需要加两个属性值，即

 observer:true, observeParents:true

屡试不爽啊，一加效果就对了，别忘了清除网页缓存  Ctrl+shift+Delate

3.那么有人问了，如果是要求轮滑效果中的其中一组的slide高度不同于其他组怎么办？其实都是初始化对象的问题，此时需要重新定义一个swiper对象来进行区别，

你可以重新赋值css来达成样式效果，这个new的新对象代码即是：

var swiper1 = new Swiper('.swiper-container1', {        pagination: '.swiper-pagination1',        slidesPerView: 1,        paginationClickable: true,        spaceBetween: 0,        loop: true,        observer:true,        observeParents:true    });var swiper = new Swiper('.swiper-container', {        pagination: '.swiper-pagination',        slidesPerView: 2.25,        paginationClickable: true,        spaceBetween: 18,        freeMode: true,//此处添加两句：在修改Swiper样式时，自动初始化swiper         observer:true,        observeParents:true    }); 

代码中为两组轮滑，我设置的属性值是不同的，在对象中改变了对象名之后，别忘了在html代码中的container1也要改好啊。

4.具体的属性值及意义可以参考官网api

http://www.swiper.com.cn/api/start/2014/1218/140.html

5.觉得有了帮助了，请点赞请关注吧。

有需要swiper的css和js可以评论后发哦。