在vue中使用swiper

1、使用npm下载vue-awesome-swiper 

npm install vue-awesome-swiper --save

2、在main.js中引用

import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
import 'swiper/dist/css/swiper.css'（css需要单独引用）

3、在组件中使用

import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  components: {
    swiper,
    swiperSlide
  }
}

html代码：

<swiper :options="swiperOption">

 <swiper-slide>1</swiper-slide>

 <swiper-slide>1</swiper-slide>

 <swiper-slide>1</swiper-slide>

</swiper>

javascript代码：

export default {
  name: '',
  data () {
    return {
      swiperOption:{
        slidesPerView: 'auto',
        centeredSlides:true,
        spaceBetween: 10,
        loop:true,
        speed:600, //config参数同swiper4,与官网一致
      }
    }
  },
  components: {
    swiper,
    swiperSlide
  }

}

　　

　　

　　

　　

　　

转载于:https://www.cnblogs.com/taokele/p/10430914.html