javascript - 未捕获的类型错误：无法读取 null 的属性“添加”-slick.js

Question

这是我第一次将 slick.js 用于轮播画廊。我不知道我的函数会发生什么，我不知道是否需要添加另一个句子或者 HTML 中脚本的顺序是否错误。它向我抛出的唯一错误如下：

这是图库 HTML：

<div class="slick-gallery slick mb-0 slick-initialized slick-slider">
    <button class="slick-prev slick-arrow" aria-label="Previous" type="button" style="display: block;">Previous</button>
    <div class="slick-list draggable">
        <div class="slick-track" style="opacity: 1; width: 4810px; transform: translate3d(-1850px, 0px, 0px);">
            <div class="slider__item slick-slide slick-cloned" tabindex="-1" style="width: 370px;" role="tabpanel" aria-describedby="slick-slide-control02" data-slick-index="-3" aria-hidden="true">
                <img src="view/images/gallery-3.jpg" alt="slider">
            </div>
            <div class="slider__item slick-slide slick-cloned" tabindex="-1" style="width: 370px;" role="tabpanel" aria-describedby="slick-slide-control03" data-slick-index="-2" aria-hidden="true">
                <img src="view/images/gallery-4.jpg" alt="slider">
            </div>
            <div class="slider__item slick-slide slick-cloned" tabindex="-1" style="width: 370px;" role="tabpanel" aria-describedby="slick-slide-control04" data-slick-index="-1" aria-hidden="true">
                <img src="view/images/gallery-5.jpg" alt="slider">
            </div>
            <div class="slider__item slick-slide" tabindex="-1" style="width: 370px;" role="tabpanel" id="slick-slide00" aria-describedby="slick-slide-control00" data-slick-index="0" aria-hidden="true">
                <img src="view/images/gallery-1.jpg" alt="slider">
            </div>
            <div class="slider__item slick-slide" tabindex="-1" style="width: 370px;" role="tabpanel" id="slick-slide01" aria-describedby="slick-slide-control01" data-slick-index="1" aria-hidden="true">
                <img src="view/images/gallery-2.jpg" alt="slider">
            </div>
            <div class="slider__item slick-slide slick-current slick-active" tabindex="0" style="width: 370px;" role="tabpanel" id="slick-slide02" aria-describedby="slick-slide-control02" data-slick-index="2" aria-hidden="false">
                <img src="view/images/gallery-3.jpg" alt="slider">
            </div>
            <div class="slider__item slick-slide slick-active" tabindex="0" style="width: 370px;" role="tabpanel" id="slick-slide03" aria-describedby="slick-slide-control03" data-slick-index="3" aria-hidden="false">
                <img src="view/images/gallery-4.jpg" alt="slider">
            </div>
            <div class="slider__item slick-slide slick-active" tabindex="0" style="width: 370px;" role="tabpanel" id="slick-slide04" aria-describedby="slick-slide-control04" data-slick-index="4" aria-hidden="false">
                <img src="view/images/gallery-5.jpg" alt="slider">
            </div>
            <div class="slider__item slick-slide slick-cloned" tabindex="-1" style="width: 370px;" role="tabpanel" aria-describedby="slick-slide-control00" data-slick-index="5" aria-hidden="true">
                <img src="view/images/gallery-1.jpg" alt="slider">
            </div>
            <div class="slider__item slick-slide slick-cloned" tabindex="-1" style="width: 370px;" role="tabpanel" aria-describedby="slick-slide-control01" data-slick-index="6" aria-hidden="true">
                <img src="view/images/gallery-2.jpg" alt="slider">
            </div>
            <div class="slider__item slick-slide slick-cloned" tabindex="-1" style="width: 370px;" role="tabpanel" aria-describedby="slick-slide-control02" data-slick-index="7" aria-hidden="true">
                <img src="view/images/gallery-3.jpg" alt="slider">
            </div>
            <div class="slider__item slick-slide slick-cloned" tabindex="-1" style="width: 370px;" role="tabpanel" aria-describedby="slick-slide-control03" data-slick-index="8" aria-hidden="true">
                <img src="view/images/gallery-4.jpg" alt="slider">
            </div>
            <div class="slider__item slick-slide slick-cloned" tabindex="-1" style="width: 370px;" role="tabpanel" aria-describedby="slick-slide-control04" data-slick-index="9" aria-hidden="true">
                <img src="view/images/gallery-5.jpg" alt="slider">
            </div>
        </div>
    </div>
    <button class="slick-next slick-arrow" aria-label="Next" type="button" style="display: block;">Next</button>
</div>

这是我的脚本 main.js 的一部分：

var slider = function() {
    if ($('.slick-gallery')) {
        $('.slick-gallery').not('.slick-initialized').slick();
        $('.slick-gallery').slick({
            centerMode: false,
            dots: false,
            infinite: true,
            speed: 300,
            slidesToShow: 3,
            slidesToScroll: 1,
            responsive: [
                {
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 3,
                        slidesToScroll: 3,
                        infinite: true,
                        dots: true
                    }
                },
                {
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1,
                        dots: true
                    }
                }
            ]
        });
    }
    if ($('.slick-wishes')) {
        $('.slick-wishes').slick({
            dots: true,
            arrows: false
        });
    }
    if ($('.slick-gifts')) {
        $('.slick-gifts').slick({
            dots: true,
            arrows: false,
            slidesToShow: 5,
            responsive: [
                {
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 3,
                        slidesToScroll: 3,
                        infinite: true,
                        dots: true
                    }
                },
                {
                    breakpoint: 640,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1,
                    }
                }
            ]
        });
    }
}

标签： javascriptjquerysliderslick.js