Question

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

目前这仅适用于转换之间。但是如何在转换期间使其工作？换句话说，我理想地需要像$('.slick').slick("finishTransition")

这样的东西

请参阅fiddle。

<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

经过一番挖掘后，我发现了一个额外的配置选项，可以让你在制作动画时使用内部方法。

public class UDFJson extends UDF {
  private final Pattern patternKey = Pattern.compile("^([a-zA-Z0-9_\\-\\:\\s]+).*");

  ... 
}

我只是将这个改变包括在内，它似乎提供了理想的结果。

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

您可能需要尝试如何使其具有高性能，但此设置最终会释放您在动画期间发出的请求。

https://jsfiddle.net/uhkagr7n/

参考的完整配置：

waitForAnimate: false,

Answer 2

以下代码应该有效。您必须动态停用 waitForAnimate 选项。当autoplay搞砸了，需要清除setInterval。这可能需要一些调整。

https://jsfiddle.net/ps41xqh4/47/

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

$('.slick-next').click(function(event) {
    for (i = 0; i < 9999; i++) {
        window.clearInterval(i);
    }

    $('.slick').slick("slickSetOption", 'autoplay', false, true)
    $('.slick').slick("slickSetOption", 'speed', 1, true)
    $('.slick').slick("slickSetOption", 'waitForAnimate', false, false)
    $('.slick').slick("slickGoTo", $('.slick').slick('slickCurrentSlide'))
    $('.slick').one('afterChange', function(e, s, c) {
        $('.slick').slick("slickSetOption", 'speed', 5000, true)
        $('.slick').slick("slickSetOption", 'autoplay', true, true)
        $('.slick').slick("slickSetOption", 'waitForAnimate', true, false)
    });
});

Answer 3

尝试将自动播放设置为false：

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

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

光滑的旋转木马 - 如何在过渡期间立即跳转到另一张幻灯片

3 个答案: