使用vue-awesome-swiper滑塊插件

基於以前寫的vue2.0 + vue-cli + webpack 搭建項目（ vue-awesome-swiper版本：3.1.3 ,swiper4，若是成功後沒報錯，但不顯示分頁樣式，可能版本對不上）

1.進入項目目錄，安裝swiper

npm install vue-awesome-swiper --save

2.引入資源（main.js文件)

import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

3.編輯組件(HelloWorld.vue文件或其餘 .vue文件)

<template>
<swiper :options="swiperOption" ref="mySwiper">
 <!-- slides -->
 <swiper-slide>I'm Slide 1</swiper-slide>
 <swiper-slide>I'm Slide 2</swiper-slide>
 <swiper-slide>I'm Slide 3</swiper-slide>
 <swiper-slide>I'm Slide 4</swiper-slide>
 <swiper-slide>I'm Slide 5</swiper-slide>
 <swiper-slide>I'm Slide 6</swiper-slide>
 <swiper-slide>I'm Slide 7</swiper-slide>
  

<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>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
require('swiper/dist/css/swiper.css')
export default {
  name: 'carrousel',
  components: {
 swiper,
 swiperSlide
},
 data() {
   return {
     swiperOption: {
       
           notNextTick: true,
           
          //循環
          loop:true,
          //設定初始化時slide的索引
          initialSlide:0,

          //自動播放
          autoplay: {
            delay: 3000,
            //觸摸後還能夠自動播放
            disableOnInteraction: false,
            },
          
          
          //滑動速度
          speed:400,

          //水平切換
          direction : 'horizontal',
         
          
          //左右點擊
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },

          //滑動以後回調函數
          on: {
              slideChange: function () {
              //第幾頁
                console.log(this.activeIndex);
              },
            },
           //分頁器設置         
           pagination: {
              el: '.swiper-pagination',
               clickable :true,
               //自定義類型（至此如下不寫是默認圓點樣式）
               type: 'custom',
                //自定義分頁器樣式
                 renderCustom: function (swiper, current, total) {
                        const activeColor = '#555555'
                        const normalColor = '#aeaeae'
                        let color = ''
                        let paginationStyle = ''
                        let html = ''
                        for (let i = 1; i <= total; i++) {
                            if (i === current) {
                                color = activeColor
                            } else {
                                color = normalColor
                            }
                            paginationStyle = `background:${color};opacity:1;margin-right:20px;width:20px;height:20px;transform:skew(15deg);border-radius:0;`
                            html += `<span class="swiper-pagination-bullet" style=${paginationStyle}></span>`
                        }
                        return html
                    }
            },
           
     }
   }
 },
 
 // 若是你須要獲得當前的swiper對象來作一些事情，你能夠像下面這樣定義一個方法屬性來獲取當前的swiper對象，同時notNextTick必須爲true
 computed: {
   swiper() {
     return this.$refs.mySwiper.swiper
   }
 },
 mounted() {
   
   // 而後你就能夠使用當前上下文內的swiper對象去作你想作的事了
   // console.log('this is current swiper instance object', this.swiper)
   // this.swiper.slideTo(3, 1000, false)
 }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.swiper-container{
  height:200px;
  overflow: hidden
}
.swiper-wrapper{
  height:200px;
}
.swiper-slide{
  height:200px;
  float: left;
  background:red;
}


</style>