web-dev-qa-db-ja.com

TypeError：$（...）。owlCarouselは関数ではありません

このカルーセルをprestashopテンプレートに追加できません。

次のエラーが返されます。

TypeError：$（...）。owlCarouselは関数ナビゲーションではありません：true

そしてそれを初期化するために使用しているコードはこれです

$(document).ready(function() {
  $("#owl-demo").owlCarousel({
    navigation : true
  });
});

私はそれを解決しようとしていますが、空のhtmlページでは機能しますが、Prestashopで使用すると機能しないため、不可能と思われます。

どんな手掛かり？

ありがとう。

jqueryfunctionprestashop
7
Xavi Alsina

追加 owl.carousel.min.jsホームページのファイルで、使用しているファイルの前に次のコードを追加します。

$("#owl-demo").owlCarousel({
    navigation : true
  });

その後、それだけが機能します。

13
Manoj Verma

フクロウカルーセルファイルの後にjqueryファイルがロードされている場合、このエラーが発生します。

（jqueryへの参照がフクロウカルーセル参照jsファイルの上にあることを確認してください）

3
Tom

JavaScriptファイルの読み込みがレイテンシの影響を受ける場合は、呼び出す前に関数が定義されているかどうかを確認できます。

jQuery.isFunctionで確認します

if($.isFunction('owlCarousel')){
  $("#owl-demo").owlCarousel({
    navigation : true
  });
}

JavaScript typeof operatorで確認します

if(typeof owlCarousel === 'function') { 
  $("#owl-demo").owlCarousel({
    navigation : true
  });
}
2
Nolwennig

{literal} {/ literal}タグを使用してください。通常、.tplファイルのこれらのタグ内にJavaScriptを配置することをお勧めします（賢い）。 JavaScriptはタグがなくても機能する可能性がありますが、エラーを返すことがあります（あなたの場合のように）

BRの

1
user2831723

外部スクリプトが完全に読み込まれる前に、htmlがインラインスクリプトを実行した理由。この方法で解決策を得ます。 defer属性をowl.carouselsource呼び出しに追加しました..

<script defer src="plugins/OwlCarousel2.3/owl.carousel.min.js"></script>

遅延属性に関するドキュメント-> att_script_defer-link

1
MD Ashik

Jqueryファイルとowl.jsファイルをヘッダーセクションに追加します

0
Gowthaman

私も同じ問題を抱えていました。関数の真上にjsファイルを追加するだけです

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<!--DO NOT ENTER ANY EXTERNAL LINK IN BETWEEN-->
<script type="text/javascript">
$(document).ready(function() {
    $('.owl-carousel').owlCarousel({
        loop: true,
    });
});
</script>
0
Vuyani Daweti