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

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

这是我第一次使用 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,dots: true
                    }
                },{
                    breakpoint: 768,settings: {
                        slidesToShow: 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,{
                    breakpoint: 640,}
                }
            ]
        });
    }
}