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

我正在尝试在达到旋转木马的最后一张幻灯片时运行一个function。 我已经设法使用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事件通过访问carousel实例属性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年使用测试版的任何人来说，最简单的方法是使用“翻译”事件，如下所示： –

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

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

  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 5

我知道这个问题有点旧，但我提出了一个更简单的解决方案，涵盖了两种情况：multiple（customItems）和singleItem，只需使用它：

 $('.wrap_carousel_feeds').owlCarousel({ rewindNav: false, responsiveRefreshRate: 50, //singleItem: true, //works itemsCustom: [ [2570, 15], [2390, 14], [2210, 13], [2030, 12], [1850, 11], [1670, 10], [1490, 9], [1310, 8], [1130, 7], [950, 6], [770, 5], [590, 4] ], //works too afterMove: function(owl){ data = $(owl).data('owlCarousel'); isLast = data.currentItem + data.visibleItems.length == data.itemsAmount; if(isLast){ //returns true when reaches the last //do stuffs } } }); 

小提琴： http ： //jsfiddle.net/rafaelmoni/1ty13y93/

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!'); } }); }); 

光滑的旋转木马是猫头鹰旋转木马的更好的替代品。 我强烈推荐。