圆滑的轮播-如何在过渡期间立即跳到另一张幻灯片

Question

我希望能够立即跳到下一张幻灯片，而无需任何进一步的转换。

当前，这仅在转换之间有效。但是，如何使其在转换期间起作用？换句话说，我理想地需要类似$('.slick').slick("finishTransition")

见小提琴。

<div class="slick">
  <img src="http://placekitten.com/g/200/200" />
  <img src="http://placekitten.com/g/200/200" />
  <img src="http://placekitten.com/g/200/200" />
  <img src="http://placekitten.com/g/200/200" />
  <img src="http://placekitten.com/g/200/200" />
</div>
<a href="javascript:;" class='slick-next'>next</a>

$('.slick').slick({
                infinite: true,
                speed: 5000,
                slidesToShow: 1,
                centerMode: true,
                variableWidth: true,
                autoplay: true,
                autoplaySpeed: 200,
                prevArrow: '',
                nextArrow: ''
});

$('.slick-next').click(function(){
    $('.slick').slick("slickSetOption", 'speed', 1, true)
    $('.slick').slick("slickNext")
    $('.slick').slick("slickSetOption", 'speed', 5000, true)
});

Answer 1

经过一番挖掘后，我发现了一个附加的config选项，该选项应允许您在制作动画时随意使用内部方法。

waitForAnimate: false,

我仅在此更改中包含了您的小提琴，它似乎提供了预期的结果。

它记录在项目github页面上：https : //github.com/kenwheeler/slick/

您可能需要试验如何使其表现出色，但是此设置最终将释放您在动画期间发出的请求。

https://jsfiddle.net/uhkagr7n/

完整的配置供参考：

$('.slick').slick({
  infinite: true,
  speed: 5000,
  slidesToShow: 1,
  centerMode: true,
  variableWidth: true,
  autoplay: true,
  autoplaySpeed: 200,
  prevArrow: '',
  nextArrow: '',
  waitForAnimate: false,
});