web-dev-qa-db-ja.com

フクロウカルーセル2-現在のスライドのソースを取得

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

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

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

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

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

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

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

編集

コメントとフクロウカルーセル2のドキュメントに記載されているリンクをさらに読むと、フクロウカルーセル2を使用した実例があります。これを参照してください jsfiddle

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

<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