javascript - 如何在使用 JQuery 到达最后一张幻灯片时不显示下一张幻灯片？

Question

我是 JQuery 编码的新手。

我想要做的是防止在到达最后一张幻灯片时显示下一张幻灯片(成为幻灯片放映的第一张幻灯片)(如此轮播:link to carousel)。我做的唯一一件事是防止显示上一个/下一个按钮(我的 JQuery 中的“.owl-prev/.owl-next”)以添加 css 类的第一张/最后一张幻灯片。当最后一张幻灯片到达但不起作用时，我试图隐藏下一张幻灯片。谁能帮帮我？

按照 JQuery 实际工作来隐藏按钮、css 类来隐藏按钮和 html 轮播:

$(document).ready(function() {

$(".owl-carousel").on('initialized.owl.carousel changed.owl.carousel refreshed.owl.carousel', function (event) {
if (!event.namespace) return;
var carousel = event.relatedTarget,
    element = event.target,
    current = carousel.current();
$('.owl-next', element).toggleClass('disabled', current === carousel.maximum());
$('.owl-prev', element).toggleClass('disabled', current === carousel.minimum());
}); 

.owl-nav .owl-prev.disabled,
.owl-nav .owl-next.disabled {
display: none;
visibility: hidden;
}

<div class="owl-carousel">
<div class="owl-stage-outer">
<div class="owl-stage">
<div class="dt-owl-item cloned">
<div class="dt-owl-item cloned">
<div class="dt-owl-item">
<div class="dt-owl-item">
<div class="dt-owl-item active">
<div class="dt-owl-item cloned">
<div class="dt-owl-item cloned">

这是防止显示幻灯片不工作的 JQuery:

if (current === carousel.maximum()){
   $(".dt-owl-item").hide();

Answer 1

你这样做怎么样:

<div class="owl-carousel owl-theme">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>

$('.owl-carousel').owlCarousel({
loop:false,
margin:10,
nav:false })

注意 loop:false 属性，您将不必订阅轮播的不同事件。