防止在 window 调整大小时重新初始化光滑的滑块

Question

我有一个 slick slider，它根据 window 宽度进行调整。调整 window 大小时，出现 Cannot read property 'add' of null" 错误。

错误的原因是因为它试图在调整大小时重新初始化 slick。我尝试了以下代码片段，但没有成功：

$(window).on( 'resize', slickOnResize );

如何防止在调整大小时出现此错误并使其仅启动一次？

$(function(){

    function slickOnResize(){
        $("#latestPosts__slick").slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed:6000,
        arrows: false,
        dots: true,
            infinite: true,
            cssEase: 'linear',
        mobileFirst: true,
            swipeToSlide: true,
        responsive: [
                {
            breakpoint: 576,
            settings : {
                        slidesToShow: 2,
                        slidesToScroll: 1,
                    }
          },
          {
            breakpoint: 1200,
            settings: 'unslick'
          }
        ]
        });
    }

    slickOnResize();

    $(window).resize(function(){
        var $window_width = $(window).width();
        if ($window_width < 1200) {
            slickOnResize();
        }
    });


});

.latestPosts {
  display: flex;
  justify-content: space-between;

  max-width: 600px;
  margin: 0 auto;
}

.latestPosts .latestPosts__slide {
  border: 1px solid red;
  padding: 30px;
}

.slick-slide {
  margin: 0px 10px;
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
  outline: none !important;
}
.slick-slide.slick-loading {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-slide img {
  width: 100%;
  display: block;
}
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}
.slick-track, .slick-list {
  transform: translate3d(0, 0, 0);
}
.slick-track {
  position: relative;
  top: 0;
  left: 0;
  align-items: center;
  width: 100%;
}
.slick-track:before, .slick-track:after {
  display: table;
  content: "";
}
.slick-track:after {
  clear: both;
}
.slick-initialized .slick-slide {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" />

<div class="latestPosts" id="latestPosts__slick">

  <div class="latestPosts__slide">Slide 1</div>
  <div class="latestPosts__slide">Slide 2</div>
  <div class="latestPosts__slide">Slide 3</div>
  
</div>

Answer 1

您应该在 window 调整大小时对该元素调用 .slick("resize") 而不是重新初始化。

在您的示例中，这将是：

$(function(){

    function slickOnResize(){
        $("#latestPosts__slick").slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed:6000,
        arrows: false,
        dots: true,
            infinite: true,
            cssEase: 'linear',
        mobileFirst: true,
            swipeToSlide: true,
        responsive: [
                {
            breakpoint: 576,
            settings : {
                        slidesToShow: 2,
                        slidesToScroll: 1,
                    }
          },
          {
            breakpoint: 1200,
            settings: 'unslick'
          }
        ]
        });
    }

    slickOnResize();

    $(window).resize(function(){
        var $window_width = $(window).width();
        if ($window_width < 1200) {
            $("#latestPosts__slick").slick("resize");
        }
    });


});

.latestPosts {
  display: flex;
  justify-content: space-between;

  max-width: 600px;
  margin: 0 auto;
}

.latestPosts .latestPosts__slide {
  border: 1px solid red;
  padding: 30px;
}

.slick-slide {
  margin: 0px 10px;
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
  outline: none !important;
}
.slick-slide.slick-loading {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-slide img {
  width: 100%;
  display: block;
}
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}
.slick-track, .slick-list {
  transform: translate3d(0, 0, 0);
}
.slick-track {
  position: relative;
  top: 0;
  left: 0;
  align-items: center;
  width: 100%;
}
.slick-track:before, .slick-track:after {
  display: table;
  content: "";
}
.slick-track:after {
  clear: both;
}
.slick-initialized .slick-slide {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" />

<div class="latestPosts" id="latestPosts__slick">

  <div class="latestPosts__slide">Slide 1</div>
  <div class="latestPosts__slide">Slide 2</div>
  <div class="latestPosts__slide">Slide 3</div>
  
</div>

唯一的变化是在 $(window).resize() 函数内部。

防止在 window 调整大小时重新初始化光滑的滑块

Prevent re-init of slick slider on window resize

javascript

html

jquery

slick.js