Vue---輪播vue-awesome-swiper

一、使用方法：

1、先在Terminal控制檯執行安裝vue-awesome-swiper並保存

npm install vue-awesome-swiper --save

2、在main.js中導入插件，並導入樣式，並引用

import VueSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

// 引用
Vue.use(VueSwiper)

方法一、

1、在需要使用的頁面文件模板中：我這裏是Home.vue

<template>
  <div>
    <swiper :options="swiperOption">
      <swiper-slide>
        <img class="swiper" src="../../static/img/swiper1.png"/>
      </swiper-slide>
      <swiper-slide>
        <img class="swiper" src="../../static/img/swiper2.png"/>
      </swiper-slide>
      <swiper-slide>
        <img class="swiper" src="../../static/img/swiper3.png"/>
      </swiper-slide>
    </swiper>
  </div>
</template>

2、在script中：

data () {
    return {
      swiperOption: {
        autoplay: true, // 自動切換
        loop: true // 循環
      }
    }
  },

方法二：

1、在需要使用的頁面文件模板中：我這裏是Home.vue

<template>
  <div>
    <swiper :options="swiperOption">
      <swiper-slide v-for="item in items" v-bind:key="item.id">
        <img class="swiper" v-bind:src="item.src"/>
      </swiper-slide>
      <div class="swiper-pagination " slot="pagination"></div>
    </swiper>
  </div>
</template>

2、在script中：

  data () {
    return {
      swiperOption: {
        autoplay: true, // 自動切換
        loop: true, // 循環
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets' // 默認圓點指示點
        }
      },
      items: [
        {id: 1, src: '../../static/img/swiper1.png'},
        {id: 2, src: '../../static/img/swiper2.png'},
        {id: 3, src: '../../static/img/swiper3.png'}
      ]
    }
  },

效果如下：

二、自定義bullet指示點

將type改爲'custom'

swiperOption: {
        autoplay: true, // 自動切換
        loop: true, // 循環
        pagination: {
          el: '.swiper-pagination',
          type: 'custom', // 自定義輪播圖bullet指示點
          renderCustom: function (swiper, current, total) {
            const activeColor = '#158300'
            const normalColor = '#aeaeae'
            let color = ''
            let paginationStyle = ''
            let html = ''
            for (let i = 1; i <= total; i++) {
              if (i === current) {
                color = activeColor
              } else {
                color = normalColor
              }
              // 如果是最後一個bullet指示點，不存在右邊距
              if (i === total) {
                paginationStyle = `background:${color}; opacity: 1; width: 6px; height: 6px;`
              } else {
                paginationStyle = `background:${color}; opacity: 1; margin-right: 5px; width: 6px; height: 6px;`
              }
              html += `<span class="swiper-pagination-bullet" style="${paginationStyle}"></span>`
            }
            return html
          }
        }
      },

效果圖如下：