Question

使用＆＃34;之前的＆＃34;回到循环中时导航按钮幻灯片似乎从最后跳到第一个。问题似乎发生在所有平台上。

继续使用导航按预期工作，拖动按预期工作。

我根据＆＃34;中心幻灯片+每个视图的自动幻灯片＆＃34;做了一个小提琴。在Swiper网站上进行演示，仅添加导航html

 <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div>

和选项

loop: true, loopedSlides: 10, roundLengths: true, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', },

JSFiddle：https://jsfiddle.net/MatraSimca/L063jo3x/17/

在生产网站上，我正在使用固定宽度的幻灯片，只有在添加

时才出现问题

roundLengths: true,

在演示小提琴中使用基于百分比的宽度时，无论是否使用roundLengths选项，都会出现问题。任何指针都赞赏......

Answer 1

循环功能仅复制DOM节点，这意味着您为循环复制的幻灯片也不会附加其JS代码，而只会附加渲染的结果。

我花了2天的时间来弄清楚这一点，因此通过使用原始的Swiper方法和事件，我发现了一个半无限循环功能：

将以下内容添加到swiper的配置中

loop: true,
loopedSlides: 1,
on: {
   slideChange: function () {
      let lastVisibleItem = this.realIndex + this.params.slidesPerView
      let slidesLength = this.slides.length - 2
      let lastVisibleIndex = this.realIndex + this.params.slidesPerView
      // if swiper reaches the end of displayed items, goToNext redirects swiper to the start
      if (lastVisibleItem > slidesLength) {
         this.slideTo(1)
      }
      // if swiper wants to go before the first item, then forward swiper to the last item
      if (lastVisibleIndex >= this.slides.length) {
         this.slideTo((slidesLength - this.params.slidesPerView) + 1)
      }
   }
}

iDangero.us Swiper循环错误与之前的导航

1 个答案: