12

次のコードブロックがあります。私がやろうとしているのは、スライド ショーの現在の画像の src を取得することだけです。機能していません。スライドを細かく変更しても、コンソールには何も表示されません。

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

1 に答える 1

26

コードが機能しない理由は、Owl Carousel に onChange コールバックが定義されていないためです。

利用可能なオプションについては、コールバックの見出しの下にあるhttp://owlgraphic.com/owlcarousel/#customizingを参照してください。

「afterMove」を使用するように更新すると、スライドが移動された後に正しく機能します。

要件に応じて、起動、移動、および更新時に起動する「afterAction」の使用を検討することもできます。

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

編集

コメントで提供されているリンクと owl carousel 2 のドキュメントをさらに読んだ後、owl carousel 2 を使用した実際の例を次に示します。このjsfiddleを参照してください。

ベータ版のものと同様に、github の問題と回答はすぐに古くなる可能性があります。owl carousel 2 サイトのドキュメントから解決策を見つけましたここ

HTML 
<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>
JS 
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);
});
于 2015-01-19T13:59:36.273 に答える