jnletao 发表于 2017-11-11 16:15:04

swiper 同一页存在多个时动画只播放第一组的解决方法

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

团子先生 发表于 2017-11-13 16:12:53

为什么不用swiper 3or4 初始化多个:):)

haojudian 发表于 2017-12-5 11:14:04

就像问这个东西好用吗
页: [1]
查看完整版本: swiper 同一页存在多个时动画只播放第一组的解决方法