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

您是否尝试过关闭旋转木马的“循环”属性？

文档：https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

<强> 更新

我明白了，你可以尝试这样的东西来更新它的设置：

var $carousel = $('.owl-carousel');
var owl = $carousel.data();
owl["owl.carousel"].options.loop = false;
owl["owl.carousel"].refresh();

Dunno，如果这是修复它的最好方法，但它对我有用。

Answer 2

你怎么做：

<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属性，你不必订阅不同的轮播事件。

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

2 个答案: