图片利用swiper插件实现轮播效果

一般当要使图片自适应屏幕大小变换时候，我们都要给每一个图片设置100%宽高。在图片的父级的div里写上固定的宽高，防止溢出。

那么轮播是写在哪一部分呢？答案就是在父级div里依次引入swiper-container，swiper-wrapper，swiper-slide，这样才不会把盒子挤偏位置。

 <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
    </div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>

如需用到左右按钮，记得给一开始说明的图片的父级class写上position:relative;按钮才会居中在左右侧