如何防止 swiper.js 禁用最后一张幻灯片上的“下一步”按钮？答案

【问题标题】：How to prevent swiper.js from disabling the "next" button on last slide?如何防止 swiper.js 禁用最后一张幻灯片上的“下一步”按钮？
【发布时间】：2021-11-02 23:11:49
【问题描述】：

在我正在编写的网站中，我有一个带有“.swiper-slide”类的 div。然后，当我完成一个表单时，将生成几个带有“.swiper-slide”类的 div。问题是 swiper 将我的第一张幻灯片识别为最后一张，并使用“.swiper-slide-next”禁用按钮。有没有办法防止 swiper 禁用它？。

我编写了这段代码，它可以工作。我想知道是否存在更干净的方法来做到这一点。

if(swiper.isEnd){
    
    $("#prosegui").removeClass("swiper-button-disabled");
    $("#prosegui").removeClass("swiper-button-lock");
    $("#prosegui").removeAttr("disabled");
    $("#prosegui").removeAttr("tabindex");
    $("#prosegui").removeAttr("aria-disabled");
    $("#prosegui").removeAttr("aria-controls");
}

“#prosegui”是下一张幻灯片按钮。

谢谢大家。

【问题讨论】：

标签： javascript html jquery slide swiper

【解决方案1】：

这个例子是有效的。你到底想做什么？
在最后一张幻灯片上，我的代码将为您提供一个 console.log 并识别到最后一张幻灯片。
如果您喜欢玩代码，请查看我为您制作的小提琴：https://jsfiddle.net/bogatyr77/rux9jekt/2/

const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'horizontal',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  }
});

swiper.on('reachEnd', function(){
     console.log("reach to End");
});

.swiper {
  width: 600px;
  height: 300px;
}

<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
<link href="https://unpkg.com/swiper@7/swiper-bundle.min.css" rel="stylesheet"/>
<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide"><img src="https://via.placeholder.com/600">
</div>
    <div class="swiper-slide"><img src="https://via.placeholder.com/600"></div>
    <div class="swiper-slide"><img src="https://via.placeholder.com/600"></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>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

【讨论】：