swiper懶加載，動畫效果

1.swiper本身支持懶加載，背景圖片同樣支持

<script> 
var mySwiper = new Swiper('.swiper-container',{
　　lazyLoading : true,  //啟動延遲加載
　　lazyLoadingInPrevNext : true,      //延遲加載應用到最接近的slide的圖片
　　lazyLoadingInPrevNextAmount : 1,   //加載下一個slide
　　lazyLoadingOnTransitionStart : true,  /過渡到slide一開始就加載，設置為true
})
</script>


data-src='img/picture.jpg'   class="swiper-lazy"  //圖片的懶加載
data-background="img/bg.jpg"  class="swiper-lazy" //背景圖片懶加載

 懶加載后css里面的背景圖片也可用data-background

 

 

2.swiper中的動畫效果

  2.1加入swiper animate

　　

//引用
<link rel="stylesheet" href="animate.min.css"> 
 <script src="swiper.animate.min.js"></script>


<script>        
  var mySwiper = new Swiper ('.swiper-container', {
 　　onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
    swiperAnimateCache(swiper); //隱藏動畫元素 
    swiperAnimate(swiper); //初始化完成開始動畫
  }, 
  onSlideChangeEnd: function(swiper){ 
    swiperAnimate(swiper); //每個slide切換結束時也運行當前slide動畫
  } 
  })        
  </script>


<div class="swiper-slide">
<p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">內容</p>
</div>

　　
　　2.2. 在需要運動的元素上面增加類名  ani   ，和其他的類似插件相同，Swiper Animate需要指定幾個參數：

　　　　swiper-animate-effect：切換效果，例如 fadeInUp 
　　　　swiper-animate-duration：可選，動畫持續時間（單位秒），例如 0.5s
　　　　swiper-animate-delay：可選，動畫延遲時間（單位秒），例如 0.3s

 

　　2.3  動畫切換效果的樣式還有很多，查看Swiper官網：http://www.swiper.com.cn/usage/animate/