使用vue-awesome-swiper輪播插件總結

  如果能看懂swiper官網文檔，請忽略此篇文章。

  遇到的問題：

  主要是版本的問題，不同版本的swiper文件不同，導致總是引用不成功。按照我的版本來，肯定暢通無阻。實現后再嘗試看官網文檔，使用最新的版本。

  1.首先下載swiper和vue-awesome-swipe。

     下載我指定的版本，否則可能會打包錯誤。

npm install swiper@3.4.2 --save-dev  //下載swiper

npm install vue-awesome-swiper@3.1.3 --save-dev //下載vue-awesome-swiper

 

　2.在vue項目main.js中引用

     也可以將樣式存在自己的文件目錄下引入，這樣可以直接更改輪播圖的樣式。

import VueAwesomeSwiper from 'vue-awesome-swiper'  
import 'swiper/dist/css/swiper.css'  //引入swiper樣式，不同版本路徑不一樣.
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

 

　3.在要顯示的頁面寫入模板代碼，有詳細注釋，耐心看完。

<template>
  <div style="width: 65%;margin: 0 auto;" @mouseenter="on_bot_enter" @mouseleave="on_bot_leave">
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide>1</swiper-slide>
      <swiper-slide>2</swiper-slide> //這里插入圖片
      <swiper-slide>3</swiper-slide>
      <swiper-slide>4</swiper-slide>
      <swiper-slide>5</swiper-slide>
      <swiper-slide>6</swiper-slide>
    </swiper>
    <!--以下看需要添加-->
    <!-- <div class="swiper-scrollbar"></div> //滾動條
    <div class="swiper-button-next"></div> //下一項
    <div class="swiper-button-prev"></div> //上一項 -->
    <div class="swiper-pagination" style="left: 50%;"></div> //這是選擇器
  </div>
</template>

<script>
  export default {
    data() {
      return {
        swiperOption: {//swiper3
          autoplay: 3000,
          speed: 1000,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },  //選擇器配置
          autoplay: {
            delay: 5000, //延遲5秒自動播放
            stopOnLastSlide: false, //到最后一張圖片是否停止自動播放。
            disableOnInteraction: false  //用戶操作后是否停止自動播放。
          },
        }
      }
    },
    methods: {
      //通過獲得的swiper對象來暫停自動播放
      on_bot_enter() { //鼠標移入停止自動播放
        this.mySwiper.autoplay.stop()
      },
      on_bot_leave() {//鼠標移出停止自動播放
        this.mySwiper.autoplay.start()
      },
    },
    //計算屬性，獲得可以操作的swiper對象
    computed: {
      mySwiper() {
        // mySwiper 是要綁定到標簽中的ref屬性
        return this.$refs.mySwiper.swiper
      },
    },
  }
</script>

<style>

</style>