轮播图 swiperOption 问题解决记录

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

原始谷粒学院中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>
<!-- 幻灯片 结束 -->

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