无法将 slick.js 轮播的 waitForAnimate 设置为 true

问题描述

我有一个很奇怪的问题，我可以将 waitForAnimate 设置为 false，但不能设置为 true...以下是我的意思的示例：>

$(".carousel").slick({
  waitForAnimate: true,slidesToShow: 3,dots: true,appendArrows: $(".carousel-arrows"),nextArrow: "<button>Next</button>",prevArrow: "<button>PrevIoUs</button>"
});

$(".set-waitforanimate-false").click(function() {
  $(".carousel").slick("slickSetoption","waitForAnimate","false")
});
$(".set-waitforanimate-true").click(function() {
  $(".carousel").slick("slickSetoption","true")
});

.carousel-img img {
  width: 100%;
  object-fit: cover;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" integrity="sha512-HGOnQO9+SP1V92SrtZfjqxxtLmVzqZpjFFekvzZVWoiASSQgSr4cw9Kqd2+l8Llp4Gm0G8GIFJ4ddwZilcdb8A==" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">

<div class="carousel-arrows"></div>
<div class="carousel">
  <div class="carousel-img"><img src="https://picsum.photos/200"></div>
  <div class="carousel-img"><img src="https://picsum.photos/201"></div>
  <div class="carousel-img"><img src="https://picsum.photos/202"></div>
  <div class="carousel-img"><img src="https://picsum.photos/203"></div>
  <div class="carousel-img"><img src="https://picsum.photos/204"></div>
</div>

<button class="set-waitforanimate-false" type="button">Set waitForAnimate to false</button>
<button class="set-waitforanimate-true" type="button">Set waitForAnimate to true</button>

无论出于何种原因，当使用 $().slick('slickSetoption',...) 将 waitForAnimate 设置为 false 时，它有效，但是当使用它将 waitForAnimate 设置为true，它没有（我也尝试过将 refresh 设置为 true 和 false）。
为什么会这样，我该如何解决？

解决方法

看起来您需要先将 caraousel 存储到变量中才能更改现有属性。你需要传递一个布尔值而不是一个字符串来改变属性。

var slider = $(".carousel").slick({
  waitForAnimate: true,slidesToShow: 3,dots: true,appendArrows: $(".carousel-arrows"),nextArrow: "<button>Next</button>",prevArrow: "<button>Previous</button>"
});

$(".set-waitforanimate-false").click(function() {
  slider.slick("slickSetOption","waitForAnimate",false);
});
$(".set-waitforanimate-true").click(function() {
  slider.slick("slickSetOption",true);
});

.carousel-img img {
  width: 100%;
  object-fit: cover;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" integrity="sha512-HGOnQO9+SP1V92SrtZfjqxxtLmVzqZpjFFekvzZVWoiASSQgSr4cw9Kqd2+l8Llp4Gm0G8GIFJ4ddwZilcdb8A==" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">

<div class="carousel-arrows"></div>
<div class="carousel">
  <div class="carousel-img"><img src="https://picsum.photos/200"></div>
  <div class="carousel-img"><img src="https://picsum.photos/201"></div>
  <div class="carousel-img"><img src="https://picsum.photos/202"></div>
  <div class="carousel-img"><img src="https://picsum.photos/203"></div>
  <div class="carousel-img"><img src="https://picsum.photos/204"></div>
</div>

<button class="set-waitforanimate-false" type="button">Set waitForAnimate to false</button>
<button class="set-waitforanimate-true" type="button">Set waitForAnimate to true</button>