vue使用swiper插件vue-awesome-swiper实现轮播

第一步

cnpm install vue-awesome-swiper@3 --save

因为版本不兼容的问题，这里指定下载的版本是3.xxx。第一次下载的时候可以先不指定，等到轮播图没有结果时再重新指定版本下载。

下载完成之后，要先将swiper.css 和swiper.js放到自己的项目文件夹下，这两个文件的存放位置在 dist --> css -->swiper.css / dist --> js -->swiper.js

第二步

             

             

             

             

             

             

             

             

             

       

第三步

  export default {

    components: {

      swiper,

      swiperSlide

    },

    data() {

      return {

        swiperOption: {

          pagination: '.swiper-pagination1',

          slidesPerView: 1,

          spaceBetween: 30,

          centeredSlides: false,

          spaceBetween: 0,

          onSlideChangeEnd: swiper => {

            //放swiper的回调方法

            this.page = swiper.realIndex+1;

            this.index = swiper.realIndex;

          },

          //左右导航栏

          navigation: {

            nextEl: '.swiper-button-next',

            prevEl: '.swiper-button-prev',

          },

          //自动播放

          autoplay:{

            delay:2000,

            disableOnInteraction:false

          },

          //指示点

          pagination: {

            el: '.swiper-pagination',

            clickable: true,

          },

          //循环

          loop:true

        }

      }

    },

    //定义swiper对象

    computed: {

      swiper() {

        return this.$refs.mySwiper.swiper;

      }

    },

    //当Vue时实例被挂载时，调用slideTo方法

    mounted () {

      this.swiper.slideTo(0, 0, false);

    }

  }

第四步 在入口函数引入swiper

import VueAwesomeSwiper from 'vue-awesome-swiper'

import './assets/css/index/swiper.css'

Vue.use(VueAwesomeSwiper)

可能出现的问题

1 出现左右箭头点击失效的情况

解决办法：

npm uninstall vue-awesome-swiper --save

npm install [email protected] --save

安装完3.1.3的版本后，重新启动查看就解决了

其他：提供官网 https://www.swiper.com.cn/api/index.html