Slick Carrousel Uncaught TypeError: $(...).slick n'est pas une fonction
de toute façon je ne suis pas en mesure d'utiliser de la nappe de carrousel (http://kenwheeler.github.io/slick/) correctement.
j'obtiens l'erreur suivante:
Uncaught TypeError: $(...).slick is not a function
j'exécute le code suivant dans mon fichier javascript:
function initSlider(){
$('.references').slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
autoplay: true,
prevArrow: '<div class="slick-prev"><i class="fa fa-chevron-left"></i></div>',
nextArrow: '<div class="slick-next"><i class="fa fa-chevron-right"></i></div>'
});
}
j'ai inclus la dernière version de jQuery (2.1.4) avec bower. J'ai également essayé d'inclure le CDN jQuery dans la tête de mon fichier de mise en page, mais cela n'a rien résolu non plus.
La seule chose étrange cela pourrait signifier quelque chose, c'est que quand je n'utilise pas une fonction pour appeler le curseur, il fonctionne mais il me donne l'erreur:
Uncaught TypeError: Cannot read property 'add' of null
j'ai découvert que cela signifie que le code a été chargé avant que le DOM soit chargé, ce qui est correct (je pense).
Merci d'avance!
Edit: j'ai créé un JSFiddle à partir de mon code: https://jsfiddle.net/brz30e77/
EDIT2: l'erreur persistait de temps en temps lors de l'ajout d'une nouvelle fonction mon dossier JS. J'ai finalement retiré mon fichier JS concaténé et j'ai découvert qu'il y avait deux versions de jQuery en cours de chargement, dont l'une était très, très ancienne.
10 réponses
j'ai trouvé la solution moi-même plus tard, donc je l'ai placée comme une réponse:
l'erreur persistait de temps en temps lors de l'ajout d'une nouvelle fonction à mon fichier JS. J'ai finalement démonté mon fichier JS concaténé et j'ai découvert qu'il y avait deux versions de jQuery chargées, dont une était très, très ancienne.
a récemment eu le même problème: TypeError: $(...).slick n'est pas une fonction
Trouvé une solution intéressante. L'espoir, il pourrait être utile à quelqu'un.
Ex: Votre code:
$(document).ready(function() {
$('a').click( function(event) {
$(this).hide();
event.preventDefault();
});
});
var $jq = jQuery.noConflict();
$jq(document).ready(function() {
$jq('a').click( function(event) {
$jq(this).hide();
event.preventDefault();
});
});
La solution a été trouvée ici: http://zenverse.net/jquery-how-to-fix-the-is-not-a-function-error-using-noconflict/
C'est difficile à dire sans regarder le code complet, mais ce type d'erreur
Uncaught TypeError: $(...).slick is not a function
Habituellement signifie que vous avez oublié d'inclure slick.js dans la page ou vous l'avez inclus avant jquery.
assurez-vous que jquery est le premier fichier js et vous avez inclus le slick.bibliothèque js après.
Essaie:
function initSlider(){
$('.references').slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
autoplay: true,
prevArrow: '<div class="slick-prev"><i class="fa fa-chevron-left"></i></div>',
nextArrow: '<div class="slick-next"><i class="fa fa-chevron-right"></i></div>'
});
}
$(document).on('ready', function () {
initSlider();
});
aussi juste pour être sûr, assurez-vous que vous incluez le fichier JS pour le curseur après avoir inclus jQuery et avant d'inclure le code ci-dessus pour initialiser.
Vous n'avez pas à charger le slick.js fichier. Ajouter ce fichier de script https://kenwheeler.github.io/slick/slick/slick.js.
j'ai mis à jour votre JSFiddle en ajoutant un fichier externe sur la barre latérale gauche External Resources. Alors il ne signale pas l'erreur:$(...).slick is not a function.
Pensé que ce serait utile pour d'autres avec le même problème, comme je l'ai vu un peu sur ici - j'ai couru dans le présent, mais j'ai trouvé que j'chargé de la nappe de.js après mon main.js (qui appelait la fonction slick ())). j'ai échangé les deux et ça marche super!--1-->
Vieille question, mais je n'ai qu'une récente fichier jQuery (v3.2.1) inclus (nappe est également inclus, bien sûr), et j'ai toujours ce problème. J'ai corrigé comme ceci:
function initSlider(selector, options) {
if ($.fn.slick) {
$(selector).slick(options);
} else {
setTimeout(function() {
initSlider(selector, options);
}, 500);
}
}
//example: initSlider('.references', {...slick's options...});
cette fonction essaie d'appliquer slick 2 fois par seconde et s'arrête après l'avoir fait fonctionner. Je ne l'ai pas analysé en profondeur, mais je pense que l'initialisation de slick est reportée.
dans mon cas la solution était de déplacer l'inclusion jQuery juste avant le </head> balise. Avec le Slick inclure en bas avant le </body> et juste avant mon script inclure qui initie le curseur.
j'ai eu le même problème avant de reconnaître que j'ai mis le code après la fermeture de l'étiquette de corps. Après l'avoir déplacée dans tag, C'est OK maintenant
<body>
$(document).ready(function(){
$('.multiple-items').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
});
</body>
Pour moi, le problème se résout après que j'ai modifié:
<script type='text/javascript' src='../../path-to-slick/slick.min.js'></script>
<script src='../../path-to-slick/slick.min.js'></script>
mon travail est basé sur Jquery 2.2.4, et j'exécute mon développement sur les dernières XAMPP et Chrome.