swiper插件基本使用

今天初次使用swiper插件，由于过程有遇到许多坑(主要开始官方文档看不懂)，在这记录下。

安装：

npm install vue-awesome-swiper --save

这里是在vue里使用，用npm安装

引入：

import Vue from 'vue';
import VueAwesomeSwiper  from "vue-awesome-swiper";

import 'swiper/dist/css/swiper.css';

Vue.use(VueAwesomeSwiper);

这里使用全局注册方式，写在main.js。

好了，完成以上步骤接下来就可以直接使用swiper了；

使用：
直接在组件上使用：

<template>
  <div>
    <swiper:options="swiperOption" ref="mySwiper">
	  <swiper-slide>I'm Slide 1</swiper-slide>
	  <swiper-slide>I'm Slide 2</swiper-slide>
	  <swiper-slide>I'm Slide 3</swiper-slide>
	  <swiper-slide>I'm Slide 4</swiper-slide>
	  <swiper-slide>I'm Slide 5</swiper-slide>
	  <!-- 下面控件自己选 -->
      <div class="swiper-pagination"  slot="pagination"></div> <!-- 分页 -->
      <div class="swiper-button-prev" slot="button-prev"></div> <!-- 前一项 -->
      <div class="swiper-button-next" slot="button-next"></div> <!-- 后一项 -->
      <div class="swiper-scrollbar"   slot="scrollbar"></div> <!-- 滚动条 -->
    </swiper>
  </div>
</template>

配置参数：

<script>
  export default {
    data() {
      return {
        swiperOption: {
          // 这里输入配置参数，参考官方文档
          // (自定义item间距，宽度等都在这)
        }
      }
    }
  }
</script>

配置参考：官方文档