Slick Carousel Uncaught TypeError: $(…). Slick не является функцией

Вопрос:

Каким-то образом я не могу правильно использовать карусель (http://kenwheeler.github.io/slick/).

Я получаю следующую ошибку:

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

Я запускаю следующий код в файле 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>’ }); }

Я включил последнюю версию jQuery (2.1.4) с беседкой. Я также попытался включить JQuery CDN в начало моего файла шаблона макета, но это тоже ничего не решило.

Единственное, что может означать что-то, это то, что когда я не использую функцию для вызова слайдера, она работает, но это дает мне ошибку:

Uncaught TypeError: Cannot read property ‘add’ of null

Я узнал, что это означает, что код загружен до загрузки DOM, что является правильным (я думаю).

Спасибо заранее!

Изменить: я создал JSFiddle из моего кода: https://jsfiddle.net/brz30e77/

EDIT2: ошибка повторялась каждый раз при добавлении новой функции в файл JS. В конечном итоге я разделил свой конкатенированный JS файл и выяснил, что были загружены две версии загружаемого jQuery, из которых один был очень-очень старым.

Лучший ответ:

Я нашел решение позже, поэтому я поместил его в качестве ответа:

Время от времени ошибка повторялась при добавлении новой функции в файл JS. В конечном итоге я разделил свой конкатенированный JS файл и обнаружил, что были загружены две версии загружаемого jQuery, из которых один был очень, очень старый.

Ответ №1

Недавно была та же проблема: TypeError: $(…). slick не является функцией

Нашел интересное решение.
Надеюсь, это может быть полезно кому-то.

В моей конкретной ситуации есть: jQuery + WHMCS + slick.
Он работает нормально автономно, без WHMCS. Но после интеграции с WHMCS появляется ошибка.

Решением было использование jQuery в режиме noConflict.

Пример:
Ваш код:

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

Код в режиме noConflict:

var $jq = jQuery.noConflict(); $jq(document).ready(function() { $jq(‘a’).click( function(event) { $jq(this).hide(); event.preventDefault(); }); });

Решение найдено здесь:

Ответ №2

Вам не удалось загрузить файл slick.js. Добавьте этот script файл https://kenwheeler.github.io/slick/slick/slick.js.

Я обновил ваш JSFiddle, добавив внешний файл на левой боковой панели External Resources. Затем он не сообщает об ошибке: $(…).slick is not a function.

Ответ №3

Думал, что это будет полезно для других с той же проблемой, что и некоторые из них здесь, – я столкнулся с этим, но обнаружил, что загрузил slick.js ПОСЛЕ моего main.js(который вызывал slick() функция). поменял местами два, и он отлично работает

Ответ №4

Трудно сказать, не глядя на полный код, но этот тип ошибки

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

Обычно означает, что вы либо забыли включить slick.js на странице, либо включили его перед jquery.

Убедитесь, что jquery – это первый js файл, и после него вы включили библиотеку slick.js.

Ответ №5

Try:

Также убедитесь, что вы включили JS файл для слайдера после включения jQuery и перед тем, как включить этот код для инициализации.

Ответ №6

Старый вопрос, но у меня есть только один недавний файл jQuery (v3.2.1), включенный (конечно, также включен slick), и у меня все еще есть эта проблема. Я исправил это следующим образом:

Эта функция пытается применить пятно 2 раза в секунду и останавливается после его работы. Я не анализировал его глубоко, но я думаю, что гладкая инициализация откладывается.

Ответ №7

В моем случае решение перемещало jQuery include непосредственно перед </head>. С помощью Slick в нижней части перед </body> и непосредственно перед включением моего скрипта, который инициирует слайдер.

Ответ №8

У меня была такая же проблема, прежде чем я узнал, что я поместил код после закрытия тега body. Переместив его в тег, теперь все в порядке.

<body> $(document).ready(function(){ $(‘.multiple-items’).slick({ infinite: true, slidesToShow: 3, slidesToScroll: 3 }); }); </body> Ответ №9

У меня такая же проблема. Когда я пытался и тестировал в браузере на своем компьютере, у меня не было ошибки “не функции”, но когда я попытался на виртуальной машине, появилась ошибка. Я решил это, добавив пятно на моем веб-сервере и добавив URL-адреса файлов css и js с моего веб-сервера в свой html. До этого я вытаскивал css и js из CDN.

Ответ №10

Для меня проблема решена после изменения:

Моя работа основана на JQuery 2.2.4, и я запускаю свою разработку на последних Xampp и Chrome.