问题描述
我有一个 slick slider
可以根据窗口宽度进行调整。调整窗口大小时,出现 Cannot read property 'add' of null"
错误。
错误的原因是因为它试图在调整大小时重新初始化光滑。我尝试了以下代码片段,但没有成功:
$(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,}
},{
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);
}
.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>
解决方法
您应该在调整窗口大小时对该元素调用 .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,}
},{
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);
}
.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()
函数内部。