web-dev-qa-db-fra.com

Slick Carousel Uncaught TypeError: $ (...). Slick n'est pas une fonction

En quelque sorte, je ne peux pas utiliser correctement le carrousel lisse ( http://kenwheeler.github.io/slick/ ). 

Je reçois 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 l'en-tête de mon fichier de modèle de mise en page, mais cela n'a rien résolu non plus.

La seule chose étrange qui pourrait signifier quelque chose est que lorsque je n'utilise pas une fonction pour appeler le curseur, cela fonctionne, mais cela me donne l'erreur suivante:

Uncaught TypeError: Cannot read property 'add' of null

J'ai découvert que cela signifie que le code a été chargé avant le DOM, 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 fichier JS. J'ai finalement vidé mon fichier JS concaténé et découvert que deux versions de jQuery étaient en cours de chargement, dont une très ancienne. 

javascriptjquerytypeerrorslick.jsuncaught-typeerror
28
Sanderfish

J'ai trouvé la solution moi-même plus tard, alors je l'ai placée comme réponse:

L'erreur persistait de temps en temps lors de l'ajout d'une nouvelle fonction à mon fichier JS. J'ai finalement dépouillé mon fichier JS concaténé et découvert que deux versions de jQuery étaient chargées, dont une très ancienne.

35
Sanderfish

Récemment eu le même problème: TypeError: $ (...). Slick n'est pas une fonction

Vous avez trouvé une solution intéressante ... Espérons que cela pourrait être utile à quelqu'un.

Dans ma situation particulière, il existe: jQuery + WHMCS + slick . Il fonctionne normalement, sans WHMCS. Mais après l'intégration à WHMCS, une erreur apparaît.

La solution consistait à utiliser jQuery en mode noConflict.

Ex: Votre code:

$(document).ready(function() { 
  $('a').click( function(event) {
    $(this).hide();
    event.preventDefault();
  });
});

Code en mode noConflict:

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/

15
alexfrize

Vous n'avez pas pu charger le fichier slick.js. Ajoutez ce fichier script https://kenwheeler.github.io/slick/slick/slick.js.

J'ai mis à jour votre JSFiddle en ajoutant un fichier externe dans la barre latérale gauche External Resources. Ensuite, il ne rapporte pas l'erreur: $(...).slick is not a function.

3
Joy

Je pensais que cela serait utile pour les autres personnes ayant le même problème, comme j'en ai vu quelques-unes ici. Je me suis heurté à cela, mais j'ai trouvé slick.js APRÈS après mon main.js (qui appelait la fonction slick ()). échangé les deux et cela fonctionne très bien

3
Drew Adams

C'est difficile à dire sans regarder le code complet mais ce type d'erreur

Uncaught TypeError: $(...).slick is not a function

Cela signifie généralement que vous avez oublié d'inclure slick.js dans la page ou que vous l'avez inclus avant jquery.

Assurez-vous que jquery est le premier fichier js et que vous avez inclus la bibliothèque slick.js.

3
Federico Giust

Vieille question, mais je n'ai qu'un seul fichier jQuery récent (v3.2.1) inclus (la nappe est également incluse, bien sûr), et j'ai toujours ce problème. Je l'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 le slick deux fois par seconde et s’arrête après le travail. Je ne l'ai pas analysé en profondeur, mais je pense que l'initialisation de slick est en train d'être différée.

2
Waldson Patricio

Essayer:

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

Pour être sûr également, assurez-vous d'inclure le fichier JS du curseur après avoir inclus jQuery et avant d'inclure le code ci-dessus pour initialiser.

2
Daniel Waghorn

J'ai eu le même problème. Quand j’essayais et j’essayais de tester sur un navigateur de mon ordinateur, je n’avais pas l’erreur "pas une fonction", mais lorsque j’ai essayé sur une machine virtuelle, l’erreur était apparue. Je l'avais résolu en ajoutant les fichiers astucieux sur mon serveur Web et en ajoutant les URL des fichiers css et js de mon serveur Web à mon code HTML. Avant cela, je tirais les fichiers CSS et JS de CDN.

1
MartinTheCreator

J'ai eu le même problème avant de reconnaître que j'avais mis le code après avoir fermé la balise body . Après l'avoir déplacé dans la balise, tout est ok

<body>
$(document).ready(function(){
    $('.multiple-items').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3
    });
});
</body>
0
sweet-2

Dans mon cas, la solution déplaçait l’inclusion jQuery juste avant la balise </head>. Avec le Slick, incluez en bas avant le </body> et juste avant mon script, qui lance le curseur.

0
s15199d