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.轮播图组件模板

<swiper :options="swiperOption" class="swiper">
      <swiper-slide>
<img src="http://p1.music.126.net/-9wiqYt8mA-X2fhNtwbLWA==/109951164584423488.jpg?imageView&quality=89"></swiper-slide>
      <swiper-slide>
<img src="http://p1.music.126.net/9RSz4xmWMugWs_hcupqnsw==/109951164586519533.jpg?imageView&quality=89"></swiper-slide>
      <swiper-slide>
<img src="http://p1.music.126.net/mYdFn0s56mQx8XvEEqt8Aw==/109951164586512490.jpg?imageView&quality=89">
</swiper-slide>
<div class="swiper-pagination"  slot="pagination"></div> 
    </swiper>
<!--
其它样式
    <div class="swiper-scrollbar"></div> //滚动条
    <div class="swiper-button-next"></div> //下一项
    <div class="swiper-button-prev"></div> //上一项
    --!>

4.轮播图JS代码

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

5.CSS样式
略