Vue swiper

版本

node：14.17.6
vue：2.9.6
swiper：5.4.5
vue-awesome-swiper：4.1.1

说明

报错时首先查看下 node_modules 下是否存在swiper组件或者降低一下swiper、vue-awesome-swiper的版本
带版本安装。 例如swiper5。 npm install [email protected] --save-dev。x表示不知道具体安装当前版本的某一个小版本

安装swiper、vue-awesome-swiper

npm install swiper vue-awesome-swiper --save-dev

全局安装main.js

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css';//注意swiper版本不一样，css引入路径和文件是有差别的
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

事例

        swiper {{item.id}}

        

        

        

      

  export default {
    data () {
      return {
        swiperHeader:{
          pagination:".swiper-pagination",
          navigation: {
            nextEl: '.swiper-button-next', //前进按钮的css选择器或HTML元素。
            prevEl: '.swiper-button-prev', //后退按钮的css选择器或HTML元素。
          },
          slidesPerView:1, //显示几个
          loop:true, //是否循环
          observer:true, 
          observerParents:true
        },
        swiperList:[{
          id:1,
          src:""
        },{
          id:2,
          src:""
        },{
          id:3,
          src:""
        }]
      }
    },
    computed:{
      //初始化实例swiper
      swiper(){
        return this.$refs.mySwiper.swiper
      }
    },
    methods:{
      next(){
        this.swiper.slideNext();
      },
      prev(){
        this.swiper.slidePrev();
      }
    }
  }

说明

1、具体的请遵循swiper官方
2、不同的版本会出现报错