awesome swiper的简单应用

1.下载
npm install vue-awesome-swiper
2.全局引用
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'//这里注意具体看使用的版本是否需要引入样式，以及具体位置。
Vue.use(VueAwesomeSwiper, /* { default global options } */)
3.轮播图组件模板

4.轮播图JS代码

  data(){
    return{
        swiperOption: {
        //小圆点
        pagination: {
          el: ".swiper-pagination",
          clickable: true  //小圆点控制轮播图页面的切换
        },
        //自动播放
        autoplay: {
          disableOnInteraction: false,
          delay: 2000  //自动轮播间隔时间
        },
        //滑动速度
        speed: 800,
        //滑动方向
        direction: "horizontal",
        //是否循环
        loop: true
      }
    }
  }

5.CSS样式
略