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

Question

我有一个非常奇怪的问题，我可以将 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", "waitForAnimate", "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 ).
为什么会这样，我该如何解决？

Answer 1

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

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", "waitForAnimate", 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.js 轮播的 waitForAnimate 设置为 true

Unable to set waitForAnimate to true for slick.js carousel

javascript

jquery

slick.js