swiper插件官网：https://www.swiper.com.cn

Vue的用法：https://github.com/surmon-china/vue-awesome-swiper

基于Vue的配置属性（组件）：https://www.swiper.com.cn/api/index.html

轮播图Swiper使用

<template>
    <div class="swiper_home">
        <swiper :options="swiperOption">
            <!-- 图片部分 -->
            <swiper-slide><img src="http://vue.thexxdd.cn/media/goods/images/banner02_p0AvgUw.jpg" alt="">
            </swiper-slide>
            <swiper-slide><img src="http://vue.thexxdd.cn/media/goods/images/banner03_rVJYJ1p.jpg" alt="">
            </swiper-slide>
            <swiper-slide><img src="http://vue.thexxdd.cn/media/goods/images/banner01_eflygKj.jpg" alt="">
            </swiper-slide>
            <!-- 图片的控制选择：参考官方api配置：https://www.swiper.com.cn/api/index.html -->
            特别注意：Vue的使用后面必须加上slot属性配置,而传统html页面是不需要配置的
            特别注意：class(swiper-slot)类似于这样的规律

            # 分页器配置
            <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 {
        name: 'swiper_home',
        data () {
            return {
                // 这个属性的配置就是轮播图的全部配置了！
                swiperOption: {
                    分页器配置
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true
                    },
                    自动切换图配置
                    autoplay: {
                        delay: 3000,
                        stopOnLastSlide: false,
                        disableOnInteraction: true
                    },
                    箭头配置
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    滚动条配置
                    scrollbar: {
                        el: '.swiper-scrollbar',
                    },


                }
            };
        }
    };

</script>