web-dev-qa-db-fra.com

Owl Carousel 2 - Obtenez le src de la diapositive actuelle

J'ai les blocs de code suivants. Tout ce que j'essaie de faire est d'obtenir le src de l'image actuelle dans le diaporama. Cela ne fonctionne pas, rien n'apparaît du tout dans la console malgré le changement de diapositive.

HTML:

<div id="banner" class="owl-carousel">
    <img src="template/banner-1.jpg" alt="">
    <img src="template/banner-2.jpg" alt="">
    <img src="template/banner-1.jpg" alt="">
    <img src="template/banner-2.jpg" alt="">
</div>

jQuery:

var owl = $(".owl-carousel");
owl.owlCarousel({
    loop: true,
    autoplay: true,
    items: 1,
    animateOut: 'fadeOut',
    onChange: function (elem) {
      var current = this.currentItem;
      var src = elem.find(".owl-item").eq(current).find("img").attr('src');
      console.log('Image current is ' + src);
    }
});
jqueryowl-carousel-2
9
Andy Holmes

La raison pour laquelle votre code ne fonctionne pas est qu'aucun rappel onChange n'est défini pour Owl Carousel.

Voir http://owlgraphic.com/owlcarousel/#customizing sous la rubrique rappel pour les options disponibles.

Si vous le mettez à jour pour utiliser "afterMove", il fonctionnera correctement après le déplacement de la diapositive.

Vous pouvez également envisager d'utiliser "afterAction" qui se déclenche au démarrage, se déplace et se met à jour en fonction de vos besoins.

var owl = $(".owl-carousel");
owl.owlCarousel({
    loop: true,
    autoplay: true,
    items: 1,
    animateOut: 'fadeOut',
    afterMove: function (elem) {
      var current = this.currentItem;
      var src = elem.find(".owl-item").eq(current).find("img").attr('src');
      console.log('Image current is ' + src);
    }
});

Éditer

Après une lecture plus approfondie du lien fourni dans les commentaires et la documentation du carrousel de hibou 2, voici un exemple de travail utilisant le carrousel de hibou 2. Voir ceci jsfiddle

Comme pour toute version bêta, les problèmes et les réponses de Github peuvent être rapidement obsolètes. Trouvé la solution à partir de la documentation sur le site du carrousel de hibou 2 ici

<div id="banner" class="owl-carousel">
    <img src="http://www.live-on-the-Edge.com/wp-content/uploads/2014/06/Sam-Tomkins-730x547.jpg" alt=""/>
    <img src="http://static.guim.co.uk/sys-images/Sport/Pix/pictures/2009/6/11/1244720277422/Aussie-Rugby-League-001.jpg" alt=""/>
    <img src="http://static.guim.co.uk/sys-images/Sport/Pix/pictures/2010/1/7/1262873655905/Rugby-referee-001.jpg" alt=""/>
    <img src="http://static.guim.co.uk/sys-images/Sport/Pix/columnists/2011/3/3/1299187263691/football-league-premier-l-007.jpg" alt=""/>
</div>

var owl = $(".owl-carousel");
owl.owlCarousel({
    loop: true,
    autoplay: true,
    items: 1,
    animateOut: 'fadeOut'
});

// jQuery method on
owl.on('changed.owl.carousel',function(property){
    var current = property.item.index;
    var src = $(property.target).find(".owl-item").eq(current).find("img").attr('src');
    console.log('Image current is ' + src);
});
22
wildavies