vue-awesome-swiper在Vue的应用

    vue-awesome-swiper是基于swiper的，安装不同版本的vue-awesome-swiper对应不同的swiper，所以swiper里面的属性多数能应用到vue-awesome-swiper中，也可以根据swiper文档来设置vue-awesome-swiper属性;

    swiper官方文档：https://www.swiper.com.cn/api/index2.html；

    在这里我使用的是vue-awesome-swiper V3.1.3（对应swiper4），文档参考：https://github.com/surmon-china/vue-awesome-swiper/tree/v3.1.3

vue-awesome-swiper(v3.1.3)安装

npm install --save vue-awesome-swiper@3.1.3 

vue-awesome-swiper(v3.1.3)应用（单文件组件）

1.单文件组件中安装(导入)swiper

// require styles
import 'swiper/dist/css/swiper.css'

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

export default {
  components: {
    swiper,
    swiperSlide
  }
}

2. 添加组件摸板

<template>
    <div>
        child2
        <swiper :options="swiperOption" class="czp">
          <swiper-slide>Slide 1</swiper-slide>
          <swiper-slide>Slide 2</swiper-slide>
          <swiper-slide>Slide 3</swiper-slide>
          <swiper-slide>Slide 4</swiper-slide>
          <swiper-slide>Slide 5</swiper-slide>
          <swiper-slide>Slide 6</swiper-slide>
          <swiper-slide>Slide 7</swiper-slide>
          <swiper-slide>Slide 8</swiper-slide>
          <swiper-slide>Slide 9</swiper-slide>
          <swiper-slide>Slide 10</swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>

3. 根据需求编辑swiper参数

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  data () {
    return {
      // Some Swiper option/callback...
      swiperOption: {
        // 所有的参数同 swiper 官方 api 参数
        direction: 'vertical',
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        autoplay: {
          delay: 1500,
          stopOnLastSlide: false,
          disableOnInteraction: true
        }// 可选选项，自动滑动
      }
    }
  },
  components: {
    swiper,
    swiperSlide
  }
}
</script>

4. 根据需求添加额外css样式

<style lang='scss' scoped>
div{
    background: gold;
}
.czp{
  height: 300px
}
</style>

参考：一个完整使用了vue-awesome-swiper的单文件组件（.vue）

<template>
    <div>
        child2
        <swiper :options="swiperOption" class="czp">
          <swiper-slide>Slide 1</swiper-slide>
          <swiper-slide>Slide 2</swiper-slide>
          <swiper-slide>Slide 3</swiper-slide>
          <swiper-slide>Slide 4</swiper-slide>
          <swiper-slide>Slide 5</swiper-slide>
          <swiper-slide>Slide 6</swiper-slide>
          <swiper-slide>Slide 7</swiper-slide>
          <swiper-slide>Slide 8</swiper-slide>
          <swiper-slide>Slide 9</swiper-slide>
          <swiper-slide>Slide 10</swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  data () {
    return {
      // Some Swiper option/callback...
      swiperOption: {
        // 所有的参数同 swiper 官方 api 参数
        direction: 'vertical',
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        autoplay: {
          delay: 1500,
          stopOnLastSlide: false,
          disableOnInteraction: true
        }// 可选选项，自动滑动
      }
    }
  },
  components: {
    swiper,
    swiperSlide
  }
}
</script>

<style lang='scss' scoped>
div{
    background: gold;
}
.czp{
  height: 300px
}
</style>