vue輪播插件vue-awesome-swiper

一、安裝依賴

npm install vue-awesome-swiper --save

二、引入awesome-swiper

src/main.js修改

import Vue from 'vue'
import App from './App'
import router from './router'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

Vue.use(VueAwesomeSwiper)

界面代碼

<template>
    <div>
          <swiper :options="swiperOption">
            <swiper-slide></swiper-slide>
            <swiper-slide></swiper-slide>
            <!--以下看需要添加-->
            <div class="swiper-scrollbar"></div> //滾動條
            <div class="swiper-button-next"></div> //下一項
            <div class="swiper-button-prev"></div> //上一項
            <div class="swiper-pagination"></div> //標頁碼
          </swiper>
   </div>
</template>     

 應用界面js代碼

<script>
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
  name: "index",
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  },
  data () {
    return {
      swiperOption: {
        // 分頁器配置
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        // 設定初始化時slide的索引
        initialSlide: 0,
        //Slides的滑動方向，可設置水平(horizontal)或垂直(vertical)
        direction: 'horizontal',
        // 自動切換圖配置
        autoplay: {
          delay: 5000,
          stopOnLastSlide: false,
          disableOnInteraction: true
        },
        // 箭頭配置
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        // 環狀輪播
        loop: true,
        slidesPerView: 'auto',
        loopedSlides: 3,
        loopAdditionalSlides: 0,
        // 一個屏幕展示的數量
        slidesPerView: 1,
        // 間距
        // spaceBetween: 26,
        // 修改swiper自己或子元素時，自動初始化swiper
        observer: true,
        // 修改swiper的父元素時，自動初始化swiper
        observeParents: true
      }
    }
  }
}
</script>