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

最新推荐文章于 2025-05-31 20:13:02 发布

weixin_43343144

最新推荐文章于 2025-05-31 20:13:02 发布

阅读量3.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue swiper

本文链接：https://blog.youkuaiyun.com/weixin_43343144/article/details/88365115

vue 同时被 2 个专栏收录

50 篇文章

订阅专栏

swiper

1 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中使用Swiper插件实现轮播图功能，包括配置属性、自定义控制元素及动画效果。通过具体代码示例，展示了分页器、左右箭头和滚动条的配置方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>