Question

我正在尝试在达到旋转木马的最后一张幻灯片时运行一个功能。我已经设法使用afterInit和afterMove回调来循环旋转木马项目，但我只需要能够在循环结束时运行一个函数。

希望你能提供帮助。

插件：http://owlgraphic.com/owlcarousel/#customizing

slideshow.owlCarousel({
            navigation: false, // Show next and prev buttons
            slideSpeed: 300,
            paginationSpeed: 400,
            singleItem: true,
            autoPlay: false,
            stopOnHover: false,
            afterInit : cycle,
            afterMove : moved,
        });

        function cycle(elem){
          $elem = elem;
          //start counting
          start();
        }

        function start() {
          //reset timer
          percentTime = 0;
          isPause = false;
          //run interval every 0.01 second
          tick = setInterval(interval, 10);
        };

        function interval() {
          if(isPause === false){
            percentTime += 1 / time;
            //if percentTime is equal or greater than 100
            if(percentTime >= 100){
              //slide to next item 
              $elem.trigger('owl.next')
            }
          }
        }

        function moved(){
          //clear interval
          clearTimeout(tick);
          //start again
          start();
        }

Answer 1

我找不到任何onEnd处理程序。

但您可以使用afterMove事件通过访问轮播实例属性currentItem和itemsCount来检查显示的元素是否是最后一个。

价：

var owl = $（“。owl-carousel”）。data（'owlCarousel'）;

代码：

// carousel setup
$(".owl-carousel").owlCarousel({
    navigation: false,
    slideSpeed: 300,
    paginationSpeed: 400,
    singleItem: true,
    autoHeight: true,
    afterMove: moved,
});


function moved() {
    var owl = $(".owl-carousel").data('owlCarousel');
    if (owl.currentItem + 1 === owl.itemsAmount) {
        alert('THE END');
    }
}

演示：http://jsfiddle.net/IrvinDominin/34bJ6/

Answer 2

上面的作品（我想）在Owl Carousel 1上，但如果您使用新的Owl 2测试版，则需要：

 $('.owl-carousel').on('change.owl.carousel', function(e) {
if (e.namespace && e.property.name === 'position' 
&& e.relatedTarget.relative(e.property.value) === e.relatedTarget.items().length - 1) {
// put your stuff here ...
console.log('last slide')
}
});

我在这里得到了上述答案顺便说一下：https://github.com/OwlFonk/OwlCarousel2/issues/292#event-140932502

Answer 3

对于2016年使用测试版的任何人来说，最简单的方法是使用＆＃39;翻译＆＃39;事件如此： -

// I'm using Drupal so I already have a carousel going.
var owl = $('#owl-carousel-page2');
// After slide has moved fire some stuff
owl.on('translated.owl.carousel', function (event) {
    console.log(event, "the event after move");
});

我已经阅读了很多这样做的方法，但这看起来效果最好。

Answer 4

以上所有解决方案都不适用于 Owl Carousel 2.3.4

所以我必须想办法做到这一点，最后我得到了以下解决方案

$('.owl-carousel').on('changed.owl.carousel', function(e) {

    var items     = e.item.count;     // Number of items
    var item      = e.item.index;     // Position of the current item
    var size      = e.page.size;      // Number of items per page

    if (item === 0) {
        console.log('Start')
    }

    if ((items - item) === size) {
        console.log('Last')
    }
    

});

Answer 5

在我看来，更好的解决方案：（上面的代码没有考虑到响应式布局，一次显示可变数量的项目）

  mySlider.on('change.owl.carousel', function(e) {
    // number of items on screen updates on responsive
    var shown = e.page.size

    // total number of slides
    var total = e.relatedTarget.items().length - 1

    // current slide index
    var current = e.item.index

    // how many slides to go?
    var remain = total - (shown + current)

    if( !remain ){
      // last slide, fire a method - but dont forget to add checks that you only fire it or execute it once
    }
  });

  mySlider.on('changed.owl.carousel', function(e) {
    // am i the first slide? I do it this way so that we can check for first being true
    var first = ( !e.item.index)

    if( first ){
      // first slide, fire a method - but dont forget to add checks that you only fire it or execute it once
    }
  });

Answer 6

这是我对猫头鹰旋转木马100％工作的第二版（2）的解决方案。

对于triger，我在这里使用api信息 - https://owlcarousel2.github.io/OwlCarousel2/docs/api-events.html


var owlSlide = jQuery('.slide');
owlSlide.owlCarousel({
 loop:true,
 autoplay:true,
 autoplayTimeout: 3000
});
// jQuery method on
owlSlide.on('changed.owl.carousel',function(property){
  if( property.item.index == 0 ){

    $(property.target).find(".owl-prev").addClass('ailqk');
     $(property.target).find(".owl-next").removeClass('ailqk');

    }else{

        var currnetel = property.item.index + property.page.size;
      // last element
        if( currnetel ==  property.item.count ){
           $(property.target).find(".owl-next").addClass('ailqk');
            $(property.target).find(".owl-prev").removeClass('ailqk');
     }else{
             $(property.target).find(".owl-next").removeClass('ailqk');
         $(property.target).find(".owl-prev").removeClass('ailqk');
     }
  }
});

Answer 7

我正在使用owl carousel 2并发现这些变量可能有所帮助：

 $('.owl-carousel').on('change.owl.carousel', function(e) { 
   var carousel = e.currentTarget,
       totalPageNumber = e.page.count, // count start from 1
       currentPageNumber = e.page.index + 1; // index start from 0
   if(currentPageNumber === totalPageNumber - 1){
     console.log('last page reached!');
   }
  });
});

光滑的旋转木马是猫头鹰旋转木马的更好选择。我强烈推荐。

Answer 8

$carousel.on('change.owl.carousel', function (e) {
         if (e.namespace && e.property.name === 'position' && e.item.index === e.item.count - 1) {
              if (ko.isObservable(values.loaded)) {
                   values.loaded(false);
              }
     }
});

Answer 9

参见下文：

$(".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 10

我遇到了同样的问题，因此我进行了搜索，但这些答案对我没有帮助，因此这是我的解决方案，该解决方案也适用于多项目幻灯片和单项目幻灯片。

@PostMapping(path = "/upload")
    @Headers("Content-Type: multipart/form-data")
    public ResponseEntity<Properties> upload(@RequestHeader(name = UID, required = false) String uid,
            @RequestPart("file") MultipartFile multiPart) {
        //Save Attachment.
    }

猫头鹰轮播：到达最后一张幻灯片时运行功能

10 个答案: