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/

 

转载于:https://www.cnblogs.com/sunshine-annie/p/6923938.html