滑动器 - 在单击下一个/上一组 2 张幻灯片之前，下一组/上一组 2 张幻灯片中的突出幻灯片不可见

Swiper - Protruding slide from the next/prev group of 2 slides is not visible until click next/prew

提问人：Sergey_Sanches-Peres 提问时间：11/10/2023 最后编辑：VLAZSergey_Sanches-Peres 更新时间：11/10/2023 访问量：32

问：

Swiper.js - 如何在 Swiper.js 中使用循环在中间的一组中制作两张幻灯片，下一张和上一张幻灯片突出？主要问题是下一个/上一个组中突出的幻灯片消失了，只有在按下下一个/上一个按钮后才会突然出现： JPG - 下一组突出的幻灯片消失

（JS）我的 Swiper.js 配置：

const swiper = new Swiper('.swiper', {
    loop: true,
    slidesPerView: 2,
    slidesPerGroup: 2,
    spaceBetween: 30,
    speed: 2000,
  
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
  
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });

（CSS）要查看下一个/上一个组样式的突出幻灯片，请执行以下操作：

.swiper {
    margin: 0px 15%;
    overflow: inherit;
}

下面是它的样子： JPG - 轮播和边距

（HTML格式）我有偶数张幻灯片 （6）：

<div class="swiper">
   <div class="swiper-wrapper">
       <!-- Slides -->
                    
       <div class="swiper-slide">1</div>
       <div class="swiper-slide">2</div>
       <div class="swiper-slide">3</div>
       <div class="swiper-slide">4</div>
       <div class="swiper-slide">5</div>
       <div class="swiper-slide">6</div>
                    
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>
                
    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

谢谢！

javascript css swiper.js

评论

0赞 Janis 11/11/2023
也许只是寻找替代的轮播脚本。例如，使用 Fancyapps UI 中的轮播就这么简单了 - jsfiddle.net/2s7j046d

答：

0赞 Roko C. Buljan 11/10/2023 #1

如果我没记错的话，在使用时，尝试也玩弄选项 loopAdditionalSlides 的值loop: true,

loopAdditionalSlides：number
创建循环后将克隆的额外幻灯片数量0

loopAdditionalSlides: 2, // Adjust as needed

评论

0赞 Sergey_Sanches-Peres 11/10/2023
感谢您的关注和帮助，但现在它的工作原理是这样的：接下来：1,2 -> 5,6 -> 1,2 -> 5,6 ...对于上一个是可以的：......6,5 <- 4,3 <- 2,1 <- 6,5 ...我以不同的方式调整了值“loopAdditionalSlides”，总是有奇怪的行为。如果我放置超过 3 个，那么下一个 btn 在滚动所有 6 个后停止工作

上一个：需要在 Swiper 幻灯片中的第一张幻灯片才能淡入

下一个：为什么使用 Angular 时 Locomotive Scroll 不工作&lt;router-outlet&gt;？