轮播图 swiperOption 问题解决记录

最新推荐文章于 2024-05-27 10:31:23 发布

菠萝爱摸鱼

最新推荐文章于 2024-05-27 10:31:23 发布

阅读量820

点赞数 12

文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/qilaixiaoboluo/article/details/135771163

版权

文章讲述了在使用Swiper轮播插件时，当动态加载数据并试图启用loop循环模式时出现问题的情况，以及如何在确保自动播放和循环功能正常工作的条件下，通过添加条件(v-if)解决轮播图卡在最后一张的问题。

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

原帖链接 swiper轮播 loop:true失效的原因_swiper8设置loop不生效-优快云博客

原始谷粒学院中swiper的制作

<!-- 幻灯片 开始 -->
<div v-swiper:mySwiper="swiperOption">
    <div class="swiper-wrapper">
        <div class="swiper-slide" style="background: #040B1B;">
            <a target="_blank" href="/">
                <img src="~/assets/photo/banner/xxx.jpg" alt="首页banner">
            </a>
        </div>
        <div class="swiper-slide" style="background: #040B1B;">
            <a target="_blank" href="/">
                <img src="~/assets/photo/banner/xxx.jpg" alt="首页banner">
            </a>
        </div>
    </div>
    <div class="swiper-pagination swiper-pagination-white"></div>
    <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
    <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
</div>

然后替换成自己后端的轮播图banner v-for遍历

自动轮播和循环轮播添加

swiperOption: {
    //配置分页
    pagination: {
      el: '.swiper-pagination'//分页的dom节点
    },
    //配置导航
    navigation: {
      nextEl: '.swiper-button-next',//下一页dom节点
      prevEl: '.swiper-button-prev'//前一页dom节点
    },
    // 自动轮播配置
    autoplay: {
        delay: 3000, // 轮播间隔时间，单位为毫秒
        disableOnInteraction: false, // 用户操作后是否停止自动轮播，默认为 true
    },
    // 循环轮播配置
    loop: true,
},

循环轮播失效(卡在最后一张轮播图上) 解决方法

加上 v-if="bannerList.length"

<!-- 幻灯片 开始 -->
<div v-swiper:mySwiper="swiperOption" v-if="bannerList.length">
    <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="banner in bannerList" :key="banner.id">
            <a target="_blank" :href="'/song/'+ banner.songId">
                <img :src="bannerpre + banner.imageUrl"  :alt="banner.title">
            </a>
        </div>
    </div>
    <div class="swiper-pagination swiper-pagination-white" slot="pagination"></div>
    <div class="swiper-button-prev " slot="button-prev"></div>
    <div class="swiper-button-next " slot="button-next"></div>
</div>
<!-- 幻灯片 结束 -->

改完之后可以自动播放以及循环播放