轮播图，swiper使用

背景：

　　最近接到一个需求，重写dashboard页面，须要用到轮播图。

　　可是轮播图只用两张图，此为前提。

　　本想直接用ElementUI的走马灯，可是只用两张图的状况下，走马灯不能循环播放，只能来回播放，公司的UI小姐姐说这样不专业，因此用了swiper。

正文：

　　一年前用过swiper，但早忘了。我说一下此次使用的过程。

　　1.装包

　　　　npm install vue-awesome-swiper --save

　　2.引入

　　// require styles 　　import 'swiper/dist/css/swiper.css' 　　import { swiper, swiperSlide } from 'vue-awesome-swiper'

　　3.使用

　　　　<swiper :options="swiperOption">
        <!-- slides -->
        <swiper-slide>
          <img src="./1.png" alt="1" />
        </swiper-slide>
        <swiper-slide>
          <img src="./2.png" alt="2" />
        </swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination"></div>
        <!-- <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div> -->
      </swiper>

 

data() {
    return { // 轮播图参数  swiperOption: { //滑动速度 speed: 800, // // 指针形状 // grabCursor : true, //循环 loop: true, //自动播放  autoplay: { // 自动切换的时间间隔，单位ms delay: 1500, // 用户操做swiper以后，是否禁止autoplay disableOnInteraction: false, }, // 分页器  pagination: { el: '.swiper-pagination', // 点击控制Swiper切换 clickable :true, } } } }, components: { swiper, swiperSlide }

 

 .container {
    width: 100%;
    overflow: hidden;
    height: 500px;
    // 轮播图样式
    .swiper-container {
      height: 100%;
      .swiper-slide {
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

4.效果