1、安装swiper

npm install swiper@3.4.1 --save-dev

2、swiper的使用demo

<template>
<div id="app">
    <swiper :options="swiperOption" ref="mySwiper">
        <!-- 图片实体 -->
        <swiper-slide v-for="item in banner"><img v-bind:src="item.src"></swiper-slide>
        <!-- 分页控制器 -->
        <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
</div>
</template>
<script>
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
export default {
    name: "pm_xiaozuhuping",
    data () {
        return {
            banner: [
                { src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541054134544&di=4caccf426755a07dc9353820d5e68157&imgtype=0&src=http%3A%2F%2Fpic19.nipic.com%2F20120210%2F7827303_221233267358_2.jpg' },
                { src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1541044554&di=63e04414a37e41b7aab33aeedc469324&src=http://pic32.nipic.com/20130810/6484447_084032029372_2.jpg' }
            ],
            swiperOption: {
                // some swiper options/callbacks
                // 所有的参数同 swiper 官方 api 参数
                // 设置分页器
                pagination: {
                    el: '.swiper-pagination',
                    // 设置点击可切换
                    clickable :true
                },
                // 设置自动轮播
                autoplay: true,
                // 设置轮播可循环
                loop : true
            }
        }
    }
}
</script>

3、swiper文档参考

https://3.swiper.com.cn/api/index.html