swipper插件使用

1. 引用相关css，js文件

<script src="lib/swiper/js/swiper.js"></script>
<link rel="stylesheet" href="lib/swiper/css/swiper.css">

2. html结构
   完整的轮播插件包括：
   .swiper-container容器：用来放轮播内容，分页器，导航按钮
   .swiper-wrapper容器：用来放轮播的内容
   .swiper-slide容器：用来放每个轮播元素，这里也可以放置一个img标签（图片轮播）
   .swiper-pagination容器：用来放分页器
   .swiper-button-prev .swiper-button-next：用来放轮播左右按钮

<style>
/**设置轮播插件外层容器大小**/
 .kerwin {
   height: 500px;
 }
</style>

<div class="swiper-container kerwin">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide aaaa</div>
    <div class="swiper-slide">Slide bbbb，</div>
    <div class="swiper-slide">Slide cccc</div>
  </div>
  <!-- 如果需要分页器 -->
  <div class="swiper-pagination"></div>
  <!-- 如果需要导航按钮 -->
  <!-- <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div> -->
</div>

3. swipper插件初始化

//初始化 swiper
new Swiper(".kerwin", {
   loop: true, //开启循环
   // direction:"vertical"//垂直轮播
   // 如果需要分页器
   pagination: {
     el: '.swiper-pagination',
   },
   slidesPerView: 3,
   spaceBetween: 30,
       // 如果需要前进后退按钮
   // navigation: {
   //   nextEl: '.swiper-button-next',
   //   prevEl: '.swiper-button-prev',
   // },
 })

当轮播图上的数据来自后台返回，需要注意new Swiper()初始化过早导致轮播图不好用的问题。注意轮播数据加载和轮播插件初始化两者之间的先后顺序

下面是错误样例
先初始化swipper插件，后加载轮播数据

  setTimeout(() => {
     //ajax成功，加载轮播数据    
  }, 2000)
  
  // 初始化swipper    
 new Swiper(".kerwin", {
   loop: true, //开启循环
   pagination: {
     el: '.swiper-pagination',
   }
 })

正确写法
先加载轮播数据，等轮播数据渲染完页面don后，再初始化swipper插件(此方法不适用于vue，因为在vue的设计思想是数据驱动dom，得到轮播数据后赋值给一个状态，页面dom并不会及时立马更新，状态改变会通知监听，只有在组件生命周期的updated里面才是页面渲染完毕。vue下的写法请看下一篇)

  setTimeout(() => {
     //ajax成功，加载轮播数据
     //使用轮播数据更新页面dom节点
	 // 初始化swipper    
	 new Swiper(".kerwin", {
	   loop: true, //开启循环
	   pagination: {
	     el: '.swiper-pagination',
	   }
	 })  
  }, 2000)