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/
РЕДАКТИРОВАТЬ 2: Ошибка сохранялась время от времени при добавлении новой функции в мой файл JS. В конце концов я удалил свой сцепленный файл JS и обнаружил, что загружаются две версии jQuery, одна из которых была очень, очень старой.
21 ответ
Я сам нашел решение позже, поэтому я поместил его как ответ:
Ошибка сохранялась время от времени при добавлении новой функции в мой файл JS. В конце концов я разобрал свой сцепленный JS-файл и обнаружил, что загружаются две версии jQuery, одна из которых была очень, очень старой.
Недавно была та же проблема: 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();
});
});
Решение было найдено здесь: http://zenverse.net/jquery-how-to-fix-the-is-not-a-function-error-using-noconflict/
Вы не смогли загрузить slick.js файл. Добавить этот файл скрипта https://kenwheeler.github.io/slick/slick/slick.js,
Я обновил ваш JSFiddle, добавив внешний файл на левой боковой панели External Resources, Тогда это не сообщает об ошибке: $(...).slick is not a function,
Трудно сказать, не глядя на полный код, но этот тип ошибки
Uncaught TypeError: $(...).slick is not a function
Обычно означает, что вы либо забыли включить slick.js на страницу, либо включили его до jquery.
Убедитесь, что jquery является первым файлом js, и вы включили библиотеку slick.js после него.
Я подумал, что это будет полезно для других с такой же проблемой, как я видел несколько здесь - я столкнулся с этим, но обнаружил, что я загрузил slick.js ПОСЛЕ моего main.js (который вызывал функцию slick()). поменял местами два, и это прекрасно работает
Пытаться:
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();
});
Также, чтобы быть уверенным, убедитесь, что вы включили JS-файл для слайдера после того, как включили jQuery, и перед тем, как включить приведенный выше код для инициализации.
Старый вопрос, но у меня есть только один недавний файл jQuery (v3.2.1) (слик также включен, конечно), и у меня все еще есть эта проблема. Я исправил это так:
function initSlider(selector, options) {
if ($.fn.slick) {
$(selector).slick(options);
} else {
setTimeout(function() {
initSlider(selector, options);
}, 500);
}
}
//example: initSlider('.references', {...slick's options...});
Эта функция пытается нанести пятно 2 раза в секунду и останавливается после того, как она заработала. Я не анализировал это глубоко, но я думаю, что инициализация слика откладывается.
У меня такая же проблема. Когда я пытался и тестировал в браузере на моем ПК, у меня не было ошибки "не функция", но когда я пытался на виртуальной машине, ошибка выскочила. Я решил эту проблему, добавив файлы Slick на свой веб-сервер и добавив URL-адреса файлов CSS и JS с моего веб-сервера в мой HTML-файл. До этого я тянул css и js из CDN.
Я не уверен на 100%, но я полагаю, что ошибка была вызвана некоторым клиентским JavaScript, который превращал экспорт в объект. Некоторый код в плагине Slick (см. Ниже) вызывает функцию require, если export не определен.
Вот часть кода, которую мне пришлось изменить в slick.js. Вы можете видеть, что я просто комментирую операторы if, и вместо этого я просто вызываю factory(jQuery).
;(function(factory) {
console.log('slick in factory', define, 'exports', exports, 'factory', factory);
'use strict';
// if (typeof define === 'function' && define.amd) {
// define(['jquery'], factory);
// } else if (typeof exports !== 'undefined') {
// module.exports = factory(require('jquery'));
// } else {
// factory(jQuery);
// }
factory(jQuery);
}
Я обнаружил, что инициализировал свой слайдер, используя встроенный скрипт в теле, что означало, что он вызывался до того, как был загружен slick.js. Я исправил использование встроенного JS в нижнем колонтитуле для инициализации ползунка после включения файла slick.js.
<script type="text/javascript" src="/slick/slick.min.js"></script>
<script>
$('.autoplay').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 4000,
});
</script>
У меня была такая же проблема, прежде чем я узнал, что я поместил код после закрытия тега body. Переместив его в тег, теперь все нормально
<body>
$(document).ready(function(){
$('.multiple-items').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
});
</body>
В моем случае решение было перемещать JQuery включить непосредственно перед </head> тег. С сликом включить в нижней части перед </body> и как раз перед включением моего скрипта, который запускает слайдер.
Убедитесь, что вы связываете файл slick.min.js перед функцией slick jQuery, а функция slick JQuery появляется после файла slick.min.js.
Я решаю эту проблему, просто добавляя https: к гладкой ссылке cdn, полученной из гладкой
Включите тег скрипта до того, как гладкая функция будет использоваться в вашем шаблоне HTML.
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
Убедитесь, что или slick.min.js правильно связаны. если slick.min.js неправильно связан, он показывает этот тип ошибки.
cndhttps://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js
Если вы хотите управлять ползунком Slick.js, вы можете использовать
Для следующего
$('slick_selector').slick("slickNext");
Для Пред.
$('slick_selector').slick("slickPrev");
Для версии > 1.5
вы не включили ссылку на пятно
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
Для меня проблема решается после того, как я изменился:
<script type='text/javascript' src='../../path-to-slick/slick.min.js'></script>
в
<script src='../../path-to-slick/slick.min.js'></script>
Моя работа основана на Jquery 2.2.4, и я работаю над последними версиями Xampp и Chrome.
for laravel code js issue
//step 3
//@section('home')
<script>
$('.classname').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
});
</script>
//@endsection<div class="classname"></div>step-1 //initialize in header section for link
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
step-2 //body code of .classnameВ Laravel я решаю:
app.sccs
// slick
@import "~slick-carousel/slick/slick";
@import "~slick-carousel/slick/slick-theme";
bootstrap.js
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
require('slick')
require('slick-carousel')
}
package.json
"jquery": "^3.2",
"slick": "^1.12.2",
"slick-carousel": "^1.6.0"
example.js
$('.testimonial-active').slick({
dots: false,
arrows: true,
prevArrow: '<span class="prev"><i class="mdi mdi-arrow-left"></i></span>',
nextArrow: '<span class="next"><i class="mdi mdi-arrow-right"></i></span>',
infinite: true,
autoplay: true,
autoplaySpeed: 5000,
speed: 800,
slidesToShow: 1,
});