<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="0.5s">slider1</div>
<div class="swiper-slide">slider2
<div class="childbox" swiper-animate-effect="zoomIn" swiper-animate-duration="0.7s"></div>
</div>
<div class="swiper-slide">slider3</div>
</div>
</div>
<script>
var mySwiper = new Swiper('.swiper-container', {
// swiper动画设置
onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
swiperAnimateCache(swiper); //隐藏动画元素
swiperAnimate(swiper); //初始化完成开始动画
},
onSlideChangeStart: function(swiper) {
swiperAnimate(swiper); //每个slide切换前时也运行当前slide动画
},
// onSlideChangeEnd: function(swiper){
// swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
// },
})
</script>
slide及其里面的元素都可以使用swiper动画,因为初始swiper动画是根据onSlideChangeEnd(),即slide发生的切换变化,如果初始swiper时,设置noSwiper:true;则动画不能出现,因为swiper没有切换变化。
此时采取第二种方案:
mySwiper.slideTo(index, speed, runCallbacks) 即mySwiper.slideTo(index, speed, true)
runCallbacks:可选,boolean,设置为false时不会触发onSlideChange回调函数。
而且此时采用
onSlideChangeStart: function(swiper) {
swiperAnimate(swiper); //每个slide切换前时也运行当前slide动画
},