輪播圖，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.效果