swiper如何防止冲突_swiper在单个页面同时绑定多个滑动效果+动画效果,如何才能不冲突...

//本插件由www.swiper.com.cn提供

function swiperAnimateCache(){for(allBoxes=window.document.documentElement.querySelectorAll(".ani"),i=0;i

.fff,

.swiper-container {

width: 600px;

height: 300px;

}

.swiper-slide:nth-of-type(1) {

height: 100%;

background: #007AFF;

}

.swiper-slide:nth-of-type(2) {

background: #666;

height: 100%;

}

.swiper-slide:nth-of-type(3) {

background: #13E8E9;

height: 100%;

}

p.ani.fadeInUp.animated {

text-align: center;

}

内容

内容

内容

内容home

内容home2

内容ffff

HTML5前端开发

一线资深前端开发工程师倾情打造！助你完成普通程序员到优秀工程师的华丽升级！

使用HTML5与CSS3技术轻松实现设备自适应展示。

清晰明了的语义代码结构，更高的可读性、更利于页面维护的。

$().ready(function() {

var mySwiper = new Swiper('.swiper-container', {

onInit: function(swiper) { //Swiper2.x的初始化是onFirstInit

swiperAnimateCache(swiper); //隐藏动画元素

swiperAnimate(swiper); //初始化完成开始动画

},

onSlideChangeEnd: function(swiper) {

swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画

}

});

var home = new Swiper('.home', {

onInit: function(swiper) { //Swiper2.x的初始化是onFirstInit

swiperAnimateCache(swiper); //隐藏动画元素

swiperAnimate(swiper); //初始化完成开始动画

},

onSlideChangeEnd: function(swiper) {

swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画

}

});

var html5 = new Swiper('#html5', {

onInit: function(swiper) { //Swiper2.x的初始化是onFirstInit

swiperAnimateCache(swiper); //隐藏动画元素

swiperAnimate(swiper); //初始化完成开始动画

},

onSlideChangeEnd: function(swiper) {

swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画

}

});

})

请问下我这样同时new 多个swiper做法合理吗?我想在绑定它们各自的容器都有动画效果，不受其他的影响，可是我这样绑定虽然滑动和动画效果出来，可是其余的容器的动画内容却被隐藏了，参数具体需要如何修改，能否指点下?