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, из которых один был очень-очень старым.

Ответы

Ответ 1

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

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

Ответ 2

Недавно была та же проблема: 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/

Ответ 3

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

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

Ответ 4

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

Ответ 5

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

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

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

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

Ответ 6

Try:

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

Ответ 7

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

function initSlider(selector, options) {
    if ($.fn.slick) {
        $(selector).slick(options);
    } else {
        setTimeout(function() {
            initSlider(selector, options);
        }, 500);
    }
}

//example: initSlider('.references', {...slick options...});

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

Ответ 8

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

Ответ 9

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

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

Ответ 10

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

Ответ 11

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

<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.