Vue使用Swiper组件制作轮播图

  最近在用Vue制作移动端项目，碰到了轮播图的制作，接下来就让小编一步一步带大家动作制作吧。

1.下载安装包

cnpm install vue-awesome-swiper@3 --save
  因为版本不兼容的问题，这里指定下载的版本是3.xxx。第一次下载的时候可以先不指定，等到轮播图没有结果时再重新指定版本下载。
  下载完成之后，要先将swiper.css 和swiper.js放到自己的项目文件夹下，这两个文件的存放位置在 dist --> css -->swiper.css / dist --> js -->swiper.js

2.添加html结构

3.设置轮播图属性

require('../../assets/css/index/swiper.css')
import '../../assets/css/index/swiper.css'
import {swiper,swiperSlide} from 'vue-awesome-swiper'

  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);
    }
  }

代码解析：

1.导入文件

根据自己项目的路径导入swiper.css文件，并且要导入vue-awesome-swiper插件中的两个对象swiper,swiperSlide

2.注册组件

将上述导入的两个对象通过components注册组件，因为组件只有注册了才能起效。

3.设置属性

属相的相关解释已将在代码块中注解。

4.在入口函数引入swiper

import VueAwesomeSwiper from 'vue-awesome-swiper'
import './assets/css/index/swiper.css'
Vue.use(VueAwesomeSwiper)

版权声明：本文为CSDN博主「追代码的小女孩」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43332684/article/details/107419755