Owl Carousel：最後のスライドに達したときに関数を実行します。

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ハンドラを見つけることができません。

しかし、あなたが表示された要素は、カルーセルインスタンスのプロパティcurrentItemとitemsCountをaccesingことで最後のものであるかどうかを確認するためにafterMoveイベントを使用することができます。 。

参考：

するvarフクロウ= $（ "フクロウカルーセル"）のデータ（ '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'); 
    } 
} 

デモ：あなたは新しいフクロウ2ベータ版を使用している場合http://jsfiddle.net/IrvinDominin/34bJ6/

Answer 2

フクロウカルーセル1で上記の作品は（私は仮定）が、あなたが必要となります。

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

私の意見では、よりよい解決策、： （上記のコードは、アカウントに一度に表示されているアイテムの可変量と応答性のレイアウトを取ることはありません）

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 4

私はこの質問は少し古いです知っています

$('.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 5

Fちょうどこのようにそれを使用して、複数（customItems）とsingleItem：が、私は両方の状況をカバーして簡単なソリューションに付属していますまたはベータ版を使って誰でも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"); 
}); 

私はこれを行う方法をたくさん読んだが、これはFYI最適に動作するようです。

Answer 6

これは、owl carousel 100％作業の2番目のバージョン（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

を私はフクロウカルーセル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!'); 
    } 
    }); 
}); 

スリックカルーセルは、フクロウカルーセルのはるかに良い代替品です。私は非常にそれをお勧めします。