如何防止滑动器.js禁用上一张幻灯片上的"next"按钮？

Question

我在写一个网站，我有一个div "。swipper -slide"很好。然后，当我用". swiver -slide"类将生成。问题是，swiper会将我的第一张幻灯片识别为最后一张，并使用"。swiper-slide-next"禁用按钮。是否有办法防止"刷屏"禁用它?

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

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"是下一张幻灯片按钮。

谢谢大家。

Answer 1

当我第一次按下一个按钮时，我也有问题，所以为了避免按钮被禁用，我使用slideNextTransitionEnd，像这样

在

<div class="swiper-button-next" id="slide-next-button"></div>

then in script

const swiper = new Swiper('#my-swipper-slide', {
direction: 'horizontal',
pagination: {
el:'.swiper-pagination',
},
navigation: {
nextEl:'.swiper-button-next',
prevEl:'.swiper-button-prev',
},
allowSlidePrev: true,
allowSlideNext: true,
loop:true
});
swiper.on('slideNextTransitionEnd',function(){
if($("#slide-next-button").hasClass("swiper-button-disabled")){
$("#slide-next-button").removeClass("swiper-button-disabled");
$("#slide-next-button").attr("aria-disabled", "false");
}
})

Answer 2

这个例子可以正常工作。最后你到底想做什么?
在最后一张幻灯片上，我的代码将给您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>