Как решить «Uncaught TypeError: Cannot read property 'add' of null»?

Question

[Сергей Бурдужа]

Использую slick.js
У меня есть блок с элементами


Хочу, чтобы при размере экрана меньше 480px, эти блоки превращались в слайдер.

Написал такой код

let windowChrome = $(window);
    function createFeaturesSlider(){
        $('#js-features-slider').slick({
            'prevArrow': $('#js-features-arrows__prev'),
            'nextArrow': $('#js-features-arrows__next'),
        });
    }

    if($(window).width() < 480){
         createFeaturesSlider();
    }

    $(window).resize(function(){
        if($(window).width() < 480){
            createFeaturesSlider();
        }
    });

Код html много, по-этому выкладываю только кусок

<div class="features__content">
				<div class="row no-gutters" id="js-features-slider">
					<div class="col-xl-3 col-lg-4 col-md-6">
						<div class="features__item">
							<div class="img-wrap">
								<img src="assets/i/features/hands.svg" alt="">
							</div>
							<h4>Заказ без предоплаты</h4>
							<p>Мы работаем, чтобы вам было комфортно. Самый удобный способ получения заказа — покупка
								без предоплаты! Заказывайте, принимайте работу и только потом платите!
							</p>
						</div>
					</div>
					<div class="col-xl-3 col-lg-4 col-md-6">
						<div class="features__item">
							<div class="img-wrap">
								<img src="assets/i/features/percent.svg" alt="">
							</div>
							<h4>Беспроцентная рассрочка</h4>
							<p>
								Не копите, а платите так, как вам удобно: постепенно, без процентов
								и комиссий. Сумма заказа делится
								на равные части.
							</p>
						</div>
					</div>

Сдается мне, что проблема в замыкании, да?
Заранее благодарен.

Answer 1

[Andrew]

Сдается мне, что проблема в замыкании, да?

Запустите так, ошибка остаётся?

let windowChrome = $(window);
    if($(window).width() < 480){
         $('#js-features-slider').slick({
            'prevArrow': $('#js-features-arrows__prev'),
            'nextArrow': $('#js-features-arrows__next'),
        });
    }

    $(window).resize(function(){
        if($(window).width() < 480){
            $('#js-features-slider').slick({
            'prevArrow': $('#js-features-arrows__prev'),
            'nextArrow': $('#js-features-arrows__next'),
        });
        }
    });

Если да, то проблема в скриптах(очередности и т.д.)
Если нет, то в замыкании.

Comments

[Сергей Бурдужа]

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

[Andrew]

Сергей Бурдужа, а div#js-features-slider
точно есть?

[Сергей Бурдужа]

Andrew, Да, есть. Первый раз я вставил тестовый код, второй рабочий))

[Andrew]

Сергей Бурдужа, вот так попробуйте

function createFeaturesSlider(){
        $('#js-features-slider').not('.slick-initialized').slick({
            'prevArrow': $('#js-features-arrows__prev'),
            'nextArrow': $('#js-features-arrows__next'),
        });
    }

    if($(window).width() < 480){
         createFeaturesSlider();
    }

    $(window).resize(function(){
        if($(window).width() < 480){
            createFeaturesSlider();
        }
    });

Отсюда

[Anatoly]

Andrew, большое спасибо. Что только уже не перепробовал. Оказалось, что вся проблема в отсутствии .not('.slick-initialized')

Answer 2

[Макс]

Попробуйте вот так:

$('#js-features-slider').slick({
            'prevArrow': $('#js-features-arrows__prev'),
            'nextArrow': $('#js-features-arrows__next'),

            responsive: [
               {
                  breakpoint:  769,
                  settings: {
                          slidesToShow: 1,
                          slidesToScroll: 5      
                  },
                  breakpoint:  481,
                  settings: {
                          slidesToShow: 2,
                          slidesToScroll: 2      
                  }
               }
            ]
        });