用swiper4插件做background背景全屏轮播

swiper插件非常好用，其实swiper官网上面的资料非常齐全，只是刚好项目用到，就来写一写，加深理解。

首先引入js和css,

<link rel="stylesheet" href="libs/swiper/swiper-4.2.2.min.css">  

<script src="libs/swiper/swiper-4.2.2.min.js"></script>

html：

 <div class="swiper-container">
      <div class="swiper-wrapper">
          <div class="swiper-slide bg-full" style="background:url(images/banner1.png)">
             <div class="wrapper width-keep">
               <img src="images/quotation1.png" alt="">
               <span class="wrapper-words">珍藏·最美的时光</span>
               <img src="images/quotation2.png" alt="">
             </div>
             <p>全家人的共享空间，承载着父母的期待，孩子的成长变化</p>
              <p>美好点滴，即时分享</p>                
             <div class="wrapper-button">
               <a href="#"><img src="images/load.png" alt=""></a>
             </div>
          </div>
          <div class="swiper-slide bg-full" style="background:url(images/banner1.png)"></div>
          <div class="swiper-slide bg-full" style="background:url(images/banner1.png)"></div>
          <div class="swiper-slide bg-full" style="background:url(images/banner1.png)"></div>
          <div class="swiper-slide bg-full" style="background:url(images/banner1.png)"></div>          
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>  
  </div>  

项目的需求是只需要分页器，而且是渐变效果的（js中写），如果你需要按钮可以参考swiper官网文档编写，因为需求要的是背景全屏铺满，重要的还是css，一定要加important强制覆盖，不然不够内联的优先级高。

.bg-full {
  background-size: cover !important;
  -webkit-background-size: cover !important;
  -o-background-size: cover !important;
  background-position: center 0;
  background-repeat: no-repeat !important; }

其他的css普通样式，是根据自己的项目需求给宽给高的，

.swiper-container {
  width: 100%;
  height: 753px;
  top: -66px; }

最后就是js

var mySwiper = new Swiper ('.swiper-container', {     
      loop: true, 
      spaceBetween: 30,
      effect: 'fade',     
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },      
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },  
      autoplay: {
                delay: 5000,
                //用户操作swiper之后，是否禁止autoplay。默认为true：停止。
                        //如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。
                        //操作包括触碰，拖动，点击pagination等。
                disableOnInteraction: false,
      }
    })

effect:‘fade’就是设置轮播的渐变效果，还有其他炫酷效果和动画可以参照动画，这插件真心强大。