0

Bootstrap 3 および Meteor と一緒に OwlCarousel バージョン 2.0 を使用しようとしています。

次のようなカルーセルのテンプレートを作成します。

<template name="featuredCarousel">
<div class = "row">
    <div class="owl-carousel">
        <div class="item"><h4>1</h4></div>
        <div class="item"><h4>2</h4></div>
        <div class="item"><h4>3</h4></div>
    </div>
</div>
</template>

これを index.html ファイルに含めます。

<div class="container">
    {{> featuredCarousel}}
</div>

最後に、カルーセルをインスタンス化するための別の .js ファイルがあります。

$('.owl-carousel').owlCarousel({
loop:true
});

このコードの大部分はドキュメントからコピーされています。したがって、私はそれが機能することを期待しています。ただし、何も表示されないだけです。ここではカルーセルが問題のようです。div から .owl-carousel クラスを削除すると、要素が表示されるからです (もちろんカルーセルではありません)。

これが機能しない理由と、機能させる方法を誰か教えてもらえますか? よろしくお願いします。

ありがとう、

トニー

4

1 に答える 1

3

レンダリングされたコールバック内にインスタンス化コードを配置する必要があります。

Template.featuredCarousel.rendered = function() {
  $('.owl-carousel').owlCarousel({
   loop:true
  });
}
于 2014-08-15T21:55:56.777 に答える