swiper轮播图

准备工具:
swiper.min.css animate.min.css
swiper.min.js swiper.animate.min.js
app.js jquery.js
写法：
1）引入css文件和js文件
例：
2）在body里添加代码
例：

 <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" style="background-image:url(img/1.jpg)"></div>
      <div class="swiper-slide" style="background-image:url(img/13.jpg)"></div> 
       <div class="swiper-slide" style="background-image:url(img/huiyi.jpeg)"></div>
      <div class="swiper-slide" style="background-image:url(img/14.jpg)"></div>   
      <div class="swiper-slide" style="background-image:url(img/12.jpg)"></div>
         <div class="swiper-slide" style="background-image:url(img/huiyi.jpeg)"></div>
    </div>
    <div class="swiper-pagination"></div>
  </div>

div 中的图在这里插入代码片片可随意定义
3）给下标点 左点 右点设置样式：
例：

  <style>
    html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #fff;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 300px;
      height: 300px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -150px;
      margin-top: -150px;
    }
    .swiper-slide {
      background-position: center;
      background-size: cover;
    }
  </style>

4）添加js代码：
例：

var swiper = new Swiper('.swiper-container', {
      slidesPerView: 1,    /*显示一个画面*/
      spaceBetween: 30,   /*间距*/
   	      effect: 'fade',/*渐变*/
      mousewheel: true,/*鼠标控制*/	
   grabCursor: true,    /*抓取光标*/
   autoplay:{        /*定义自动走*/
      	 delay: 2500,     /*定义自动走间隔时间*/
        disableOnInteraction: false,
      },	
      loop: true,    /*循环*/
      pagination: {      /*下标点*/
        el: '.swiper-pagination',
        clickable: true,  /*定义点击*/
      },
	//   direction:vertical,/*竖向切换*/horizontal,/*横向切换*/
 	      navigation: {
        nextEl: '.swiper-button-next',/*左点击*/
        prevEl: '.swiper-button-prev',/*右点击*/
      },
    });