在 Swiper JS 中使用下一个/上一个按钮控制幻灯片的数量

Posted 2023-05-08

【中文标题】在 Swiper JS 中使用下一个/上一个按钮控制幻灯片的数量

【英文标题】：Control number of slides with next/previous buttons in Swiper JS

【发布时间】：2021-12-14 18:29:25

【问题描述】：

我正在使用显示多张幻灯片的Swiper Maniuplation 效果，但是当我单击下一步按钮时，我希望它只附加一张幻灯片，而不是两张幻灯片。这就是我将它与 Svelte 集成的方式：

<Swiper
    modules=[Navigation]
    spaceBetween=20
    slidesPerView=1
    navigation
    breakpoints=
        // >= 640px
        640: 
            width: 640,
            slidesPerView: 1,
        ,
        // >= 768px
        768: 
            width: 768,
            slidesPerView: 2,
        ,
     
    on:slideChange=() => console.log('slide change')
    on:swiper=(e) => console.log(e.detail[0])
>
    #each reviews as reviewer (reviewer.id)
        <SwiperSlide>
            <div class="shadow-md">
                slide.title
            </div>
        </SwiperSlide>
    /each
</Swiper>

我该如何解决这个问题？谢谢

【参考方案1】：

您需要附加什么，使用延迟加载并加载上一个和下一个或仅使用 loadPrevNextAmount 加载不是更好吗（查看文档）？