Owl Carousel: fonction d'Exécution lors de la dernière diapositive est atteint

Je suis en train d'exécuter une fonction lorsque la dernière lame du carrousel a été atteint. J'ai réussi à utiliser afterInit et afterMove rappels de cycle du carrousel articles, mais j'ai juste besoin d'être en mesure d'exécuter une fonction lorsque le cycle se termine.

Espère que vous pouvez aider.

Plugin: 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();
        }

OriginalL'auteur Qbessi | 2014-01-14

  1. 10

    Je ne trouve pas de onEnd gestionnaire.

    Mais vous pouvez utiliser afterMove événement pour vérifier si l'élément affiché est le dernier, par l'accès aux le carrousel des propriétés d'une instance currentItem et itemsCount.

    Ref:

    var chouette = $(".owl carousel").de données('owlCarousel');

    Code:

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

    Démo: http://jsfiddle.net/IrvinDominin/34bJ6/

    Je ne peux pas obtenir que cela fonctionne, mais je suis en utilisant owl carousel 2 beta...savez-vous si la même chose devrait travailler là-bas?

    OriginalL'auteur Irvin Dominin

  2. 5

    Les travaux ci-dessus (je suppose) sur Owl Carousel 1, mais si vous utilisez la nouvelle Owl 2 bêta, vous aurez besoin de:

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

    J'ai eu la réponse ci-dessus ici btw: https://github.com/OwlFonk/OwlCarousel2/issues/292#event-140932502

    Cela fonctionne comme un charme 🙂 Merci Stephen (j'ai eu le même issueas Qbessi)
    Ce qui fonctionne à merveille si votre utilisation de la version bêta.

    OriginalL'auteur Stephen

  3. 1

    Pour toute personne utilisant la version bêta en 2016, le plus simple est d'utiliser le "traduit par" l'événement de la sorte:-

    //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");
});

    J'ai lu beaucoup de façons de le faire, mais cela semble fonctionner le mieux pour info.

    OriginalL'auteur Joe Keene

  4. 0

    Une meilleure solution, à mon avis:
    (le code ci-dessus ne tiennent pas compte des mises en forme réactives avec une quantité variable d'éléments à la fois)

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

    OriginalL'auteur Beans

  5. 0

    Je sais que cette question est un peu vieux, mais je suis venu avec une solution plus simple qui couvre à la fois les situations: plusieurs(customItems) et singleItem, juste l'utiliser comme ceci:

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

    Violon:
    http://jsfiddle.net/rafaelmoni/1ty13y93/

    OriginalL'auteur Rafael Moni

  6. 0

    C'est ma solution pour la deuxième version ( 2 ) de owl carousel 100% de travail.

    Pour triger-je utiliser l'api d'info ici -
    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');
         }
      }
    });

    OriginalL'auteur Pavel

  7. 0

    Je suis en utilisant owl carousel 2 et trouvé ces variables sont susceptibles de vous aider: 

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

    De la nappe de carrousel est une bien meilleure alternative à owl carousel. Je les recommande fortement.

    OriginalL'auteur N.J.Chen

  8. 0
    $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);
              }
     }
});

    OriginalL'auteur Mike Flynn