在vue中使用swiper，vue轮播图插件vue-awesome-swiper

参考官方文档：https://github.com/surmon-china/vue-awesome-swiper
附上 swiper 中文网：https://www.swiper.com.cn/

1.npm安装

npm install vue-awesome-swiper --save

2在main.js中引入

import VueAwesomeSwiper from 'vue-awesome-swiper' 
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

3还可以参考官方文档的demo文件

// 附上官方demo文档地址
https://github.com/surmon-china/vue-awesome-swiper/tree/master/examples

4 个人代码参考
index.vue的内容

//
 <div class="swiper-container">
          <md-card>
            <md-card-media>
              <swiper :options="swiperOption">
                <swiper-slide>
                  <img src="../../images/figure_1.png" alt>
                </swiper-slide>
                <swiper-slide>
                  <img src="../../images/figure_2.png" alt>
                </swiper-slide>
                <swiper-slide>
                  <img src="../../images/figure_3.png" alt>
                </swiper-slide>
                <swiper-slide>
                  <img src="../../images/figure_4.png" alt>
                </swiper-slide>
                <swiper-slide>
                  <img src="../../images/figure_5.png" alt>
                </swiper-slide>
                <swiper-slide>
                  <img src="../../images/figure_6.png" alt>
                </swiper-slide>
                <swiper-slide>
                  <img src="../../images/figure_7.png" alt>
                </swiper-slide>
                <swiper-slide>
                  <img src="../../images/figure_8.png" alt>
                </swiper-slide>
                <swiper-slide>
                  <img src="../../images/figure_9.png" alt>
                </swiper-slide>
                <swiper-slide>
                  <img src="../../images/figure_10.png" alt>
                </swiper-slide>
                <swiper-slide>
                  <img src="../../images/figure_11.png" alt>
                </swiper-slide>
              </swiper>
            </md-card-media>
          </md-card>
        </div>
        //我实现的是官方文档110的类型轮播图

index.vue的css样式

//采用的是scss，r()是自己封装的一个函数
.agent-swiper {
      width: 100%;
      color: #666666;
      padding-top: r(29px);
      background-color: #fff;
      h2 {
        font-size: r(30px);
        padding: r(25px) r(30px);
        box-sizing: border-box;
        margin-bottom: r(25px);
      }
      .swiper-container {
        width: 100%;
        height: r(330px);
        .swiper-slide {
          width: r(195px);
          height: r(330px);
          margin-right: 0;
        }
      }
      .swiper-bottom {
        height: r(80px);
        line-height: r(30px);
        text-align: center;
        color: #1898ff;
        margin-bottom: 0;
        font-weight: normal;
        font-size: r(24px);
      }
    }

js api参数 重点

export default {
  data() {
  return{
  		//轮播图的api
      swiperOption: {
        slidesPerView: 4,  //这个表示父盒子的宽度放下几个子盒子slide
        spaceBetween: 0,   //表示子盒子与子盒子之间的距离（slide之间的距离）
        pagination: {
          el: ".swiper-pagination",  //官网api参数写在这里
          clickable: true
             }
          },
         }
      }，
  }

  

5最终效果
主要做的是滑动的轮播图，后面有十一张图片