vue项目中使用Swiper

安装

npm install vue-awesome-swiper -save 或者  yarn add vue-awesome-swiper

使用

全局注册没问题

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper)
局部页面注册会报错,原因暂时未知。
页面调用
 <swiper ref="mySwiper" :options="swiperOptions" class="my-swiper">
      <swiper-slide> <img src="index.png" /> </swiper-slide>
</swiper>    
  export default {
    name: "screen",
    components: {},
    data () {
      return {
          swiperOptions:{
            // 轮播图的方向,也可以是vertical方向horizontal
            direction:'vertical',
            //播放速度
            loop: true,
             //自动播放
            autoplay: {
                delay: 3000,
                stopOnLastSlide: false,
                disableOnInteraction: true,
            },
            // 播放的速度
            speed:2000,
          },
      }
    },
    computed: {},
    mounted(){},
    methods: {}
  }
原文地址:https://www.cnblogs.com/auto123-num/p/12794233.html