Скользкая Карусель 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) с bower. Я также попытался включить jQuery CDN в голову моего файла шаблона макета, но это тоже ничего не решило.

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

Uncaught TypeError: Cannot read property 'add' of null

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

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

Edit: я создал JSFiddle из своего кода:https://jsfiddle.net/brz30e77/

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

23
javascript jquery slick.js typeerror uncaught-typeerror

10 ответов

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

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

31

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

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

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

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

Ex: Код:

$(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/

11

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

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

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

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

2

попробуй:

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 и перед включением кода выше для инициализации.

2

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

я обновил свой JSFiddle добавив внешний файл на левой боковой панели External Resources. Тогда он не сообщает об ошибке:$(...).slick is not a function.

2

думал, что это будет полезно для других с той же проблемой, как я видел несколько Здесь - я столкнулся с этим, но обнаружил, что я загрузил Слик.js после моей основной.js (который вызывал функцию slick ()). поменял два и он работает

2

старый вопрос, но у меня есть только один недавний файл 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 раза в секунду и останавливается после его работы. Я не анализировал это глубоко, но думаю, что инициализация Слика откладывается.

1

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

0

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

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

для меня проблема решается после того, как я изменил:

<script type='text/javascript' src='../../path-to-slick/slick.min.js'></script>

to

<script src='../../path-to-slick/slick.min.js'></script>

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

-1