Vue之轮播图插件swiper的配置与用法及注意事项

矫情吗；* 2021-09-18 10:52 366阅读 0赞

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

Vue的用法：[https://github.com/surmon-china/vue-awesome-swiper][https_github.com_surmon-china_vue-awesome-swiper]

基于Vue的配置属性（组件）：[https://www.swiper.com.cn/api/index.html][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>
                
                特别注意：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>

[https_github.com_surmon-china_vue-awesome-swiper]: https://github.com/surmon-china/vue-awesome-swiper
[https_www.swiper.com.cn_api_index.html]: https://www.swiper.com.cn/api/index.html