Как не показывать следующий слайд при достижении последнего слайда с помощью JQuery? - PullRequest
Новая
       8

Как не показывать следующий слайд при достижении последнего слайда с помощью JQuery?

0 голосов
/ 30 мая 2018

Я очень новое кодирование с JQuery.

Что я хочу сделать, это запретить показ следующего слайда (который становится первым слайдом слайд-шоу) при достижении последнего слайда (как в этой карусели: ссылка на карусель ).Единственное, что я сделал, это запретил показ кнопки «предыдущий / следующий» («.owl-prev / .owl-next» в моем JQuery) для первого / последнего слайда, добавив класс 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();

Ответы [ 2 ]

0 голосов
/ 30 мая 2018

Как насчет того, чтобы сделать это следующим образом: 

<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, и вам не придется подписываться на различные события карусели.

0 голосов
/ 30 мая 2018

Вы пытались отключить свойство "loop" со своей карусели?

Документы: 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();

Не знаю, если это лучший способ исправить это, но у меня это сработало.

...