Swiper中文论坛

标题: swiper 同一页存在多个时动画只播放第一组的解决方法 [打印本页]
作者: jnletao    时间: 2017-11-11 16:15
标题: swiper 同一页存在多个时动画只播放第一组的解决方法
如果你打算在 头部放组幻灯，在页面中部再放组幻灯，当然都是带animate效果的，你会发现这个动画只播放顶部第一组的，中部的不播放。 原因：swiper.animate1.0.2.min.js  ，这个文件里写死了 类名  ani        ，所以页面内所有幻灯的动画都受他控制，如果存在多组，这个问题就麻烦了。因为
swiperAnimateCache 相同，类名也相同，没法区分。
  1. //幻灯动画  
  2. var mySwiper = new Swiper ('#swiper-container01', {
  3.     pagination: '#swiper-container01 > .pagination',
  4.     paginationClickable :true,
  5.     autoplay : 10000,
  6.     speed:1,
  7.     loop:true,
  8.     //autoplayDisableOnInteraction : false,   
  9.     //onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
  10.     onSwiperCreated: function(swiper){ //Swiper2.x的初始化是onFirstInit
  11.         swiperAnimateCache(swiper); //隐藏动画元素
  12.         swiperAnimate(swiper); //初始化完成开始动画
  13.     },
  14.     onSlideChangeEnd: function(swiper){
  15.     swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
  16.     }
  17. })
复制代码
解决方法：重编译swiper.animate1.0.2.min.js， 改函数名，改class类名，再调用。

作者: 团子先生    时间: 2017-11-13 16:12
为什么不用swiper 3or4 初始化多个
作者: haojudian    时间: 2017-12-5 11:14
就像问这个东西好用吗



欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/) Powered by Discuz! X3.2