<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動畫
},