web-dev-qa-db-fra.com

TypeError: $ (...). OwlCarousel n'est pas une fonction

J'ai du mal à ajouter ce carrousel à mon modèle de prestashop.

Cela me renvoie l'erreur suivante:

TypeError: $ (...). OwlCarousel n'est pas une fonction de navigation: true

Et le code utilisé pour l'initialiser est celui-ci

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

J'essaie de le résoudre, mais semble impossible, car sur une page html vide, cela fonctionne mais pas lorsque je l'utilise sur Prestashop.

Un indice?

Merci.

jqueryfunctionprestashop
7
Xavi Alsina

Ajouter owl.carousel.min.js fichier dans votre page d'accueil et avant le fichier dans lequel vous utilisez ajoutez le code suivant:

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

Alors seulement ça marchera.

13
Manoj Verma

Vous obtiendrez cette erreur si le fichier jquery se charge après le fichier carrousel de hibou.

(Assurez-vous que votre référence à jquery est au-dessus du fichier js de référence du carrousel de hibou)

3
Tom

Si le chargement des fichiers JavaScript est affecté par une certaine latence, vous pouvez vérifier si la fonction est définie avant de l'appeler.

Vérifiez avec jQuery.isFunction

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

Vérifiez avec opérateur de type JavaScript

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

Essayez d'utiliser des balises {literal} {/ literal}. Il est généralement recommandé de mettre du javascript dans ces balises dans des fichiers .tpl (smarty). Javascript peut fonctionner sans les balises mais peut parfois renvoyer une erreur (comme dans votre cas)

BR's

1
user2831723

La raison pour laquelle html exécutait parfois un script en ligne avant que le script externe ne se charge parfaitement. J'obtiens une solution de cette façon. Je viens d'ajouter l'attribut defer à mon owl.carouselsource appelant comme ..

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

Documentation sur l'attribut defer -> att_script_defer-link

1
MD Ashik

Ajoutez votre fichier Jquery et owl.js à la section d'en-tête

0
Gowthaman

J'ai eu le même problème. Ajoutez simplement le fichier js juste au-dessus de votre fonction

<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