Пожарное событие, когда совая карусель (2.3) достигает последнего слайда

Question

Я использую карусель сов, в bootstrap модальное всплывающее окно, для последнего слайда нужно закрыть всплывающее окно,

Я пытался с помощью следующего кода, но не повезло, есть ли способ, где Я могу запустить событие на последнем слайдере совы, чтобы закрыть модальное всплывающее окно

 $(document).ready(function(){
       $(".owl-carousel").owlCarousel({
         loop:true,
         dots:true,
         nav:true,
         items:1,
         autoplay: false,
         autoplayTimeout: 7000,
             autoplaySpeed: 1400,
         autoplayHoverPause: true,
         navigation: false,
         slideSpeed: 300,
         paginationSpeed: 400,
         singleItem: true,
         autoHeight: true,
         afterMove: moved,
       })

       function moved() {
        $(".owl-carousel").on('change.owl.carousel', function(e) { 

          var total = e.item.count, // # of total items
          itemsPerPage = e.page.size, // # of items that appear per page
          itemGoOut = e.item.index, // index of last item that appeared then went out (index start with 0)
          itemRemain = total - (itemsPerPage + itemGoOut + 1);

          if(itemRemain === 0){
              console.log("No more Items");
          }

          });
        }
      });

Answer 1

Вы можете следовать приведенному ниже коду и использовать changed.owl.carousel событие:

$(".owl-carousel").owlCarousel({
  loop: false,
  dots: true,
  nav: true,
  items: 1,
  autoplay: false,
  autoplayTimeout: 7000,
  autoplaySpeed: 1400,
  autoplayHoverPause: true,
  navigation: false,
  slideSpeed: 300,
  paginationSpeed: 400,
  singleItem: true,
  autoHeight: true,
});

let isOver = 0;

$(".owl-carousel").on('changed.owl.carousel', function(e) {
  var current = e.item.index + 1;
  total = e.item.count;
  if (current === total) {
    isOver = 1;
  }
});

$('.owl-next').click(function() {
  if (isOver === 1) {
    isOver = isOver + 1
  } else if (isOver === 2) {
    alert('now close!');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha256-UhQQ4fxEeABh4JrcmAJ1+16id/1dnlOEVCFOxDef9Lw=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha256-pTxD+DSzIwmwhOqTFN+DB+nHjO4iAsbgfyFq5K5bcE0=" crossorigin="anonymous"></script>

<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>
</div>

---

Хорошо, на самом деле вы не можете запускать какие-либо функции после того, как сова-карусель достигает конца, потому что она возвращает false и ничего не возвращает В общем, вы можете сделать это хитрым способом, также вам нужно отключить настройку loop, чтобы получить лучший результат. В этом трюке я только что установил условие после того, как оно дойдет до конца: