javascript - 当 owl carousel(2.3) 到达最后一张幻灯片时触发事件

Question

我正在使用猫头鹰轮播，在引导模式弹出窗口中，最后一张幻灯片需要关闭弹出窗口，

我尝试使用以下代码，但没有运气，有什么办法可以在最后一个猫头鹰 slider 上触发事件来关闭模式弹出窗口

 $(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>

<小时/>

好吧，实际上在 owl carousel 到达末尾后你不能运行任何函数，因为它返回 false 并且根本不会返回任何东西，你也可以用一种棘手的方法来做到这一点，您需要关闭循环设置才能获得更好的结果。在这个技巧中，我只是在到达末尾后设置和条件: