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

2、在script中：

data () {
    return {
      swiperOption: {
        autoplay: true, // 自动切换
        loop: true // 循环
      }
    }
  },

方法二：

1、在需要使用的页面文件模板中：我这里是Home.vue

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 += ``
            }
            return html
          }
        }
      },

效果图如下：