使用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>