slickGoTo 在动画期间不起作用答案

【问题标题】：slickGoTo wont work during animationslickGoTo 在动画期间不起作用
【发布时间】：2015-07-27 03:22:10
【问题描述】：

我正在构建一个带有 slick 的滑块，而不是 10 个滑块。每一个都是图像水平幻灯片的一部分。

如果其中一个被点击，那么它们都应该滑动到具有slickGoTo 的相同随机索引。但是，如果当前正在对幻灯片进行动画处理，则一个滑块会完成它的动画，而不是转到正确的幻灯片。

我尝试使用 $('.slick-track').stop(true, true); 停止动画，但这不起作用。

关于如何让slickGoTo 转到右侧幻灯片或停止动画然后调用slickGoTo 的任何想法？

HTML

<div class="your-class">
    <img src="images/aaron_09.jpg" />
    <img src="images/ferrier_09.jpg" />
    <img src="images/hassan_09.jpg" />
    <img src="images/heimz_09.jpg" />
    <img src="images/joe_09.jpg" />
    <img src="images/paul_09.jpg" />
    <img src="images/savitha_09.jpg" />
    <img src="images/vaughn_09.jpg" />
</div>
<div class="your-class">
    <img src="images/aaron_10.jpg" />
    <img src="images/ferrier_10.jpg" />
    <img src="images/hassan_10.jpg" />
    <img src="images/heimz_10.jpg" />
    <img src="images/joe_10.jpg" />
    <img src="images/paul_10.jpg" />
    <img src="images/savitha_10.jpg" />
    <img src="images/vaughn_10.jpg" />
</div>

$(document).ready(function(){
    var slick_settings = {
        slidesToShow: 1,
        adaptiveHeight: true,
        dots: false,
        arrows: false,
        infinite: true,
        speed: 1000
    };

    var slider_collection = $('.your-class');
    var slick_collection = slider_collection.slick(slick_settings);
    var slick_collection_length = slick_collection.length -1;// -1 since it is used for indexes

    // slide a random slider left or right
    function slide() {
        var slider_key = Math.floor(Math.random() * slick_collection_length);
        var slider = slider_collection[ slider_key ];
        // pause on hover
        if(slider_collection.filter(function() { return $(this).is(":hover"); }).length){
            return;
        }
        // left or right
        if(Math.random() >= 0.5){
            $(slider).slick('slickNext');
        }
        $(slider).slick('slickPrev');
    }
    setInterval(slide, 2000);

    // build a image
    $(slider_collection).click(function(e){
        var slider_key = Math.floor(Math.random() * slick_collection_length);
        $('.slick-track').stop(true, true); // doesnt stop the animation
        $(slider_collection).each(function(){
            $(this).slick('slickGoTo', slider_key);
        });
    });
});

【问题讨论】：

标签： javascript jquery html slider slick.js

【解决方案1】：

我需要设置 waitForAnimate: false 这个选项在 git repos 自述文件中，而不是在网站上。

【讨论】：

【解决方案2】：

例如：

$('.class').slick('slickGoTo', 2, true); 不会动画

和

$('.class').slick('slickGoTo', 2, false); 会动画

文档说：

slickGoTo

参数 : int : 幻灯片编号, boolean: 不要动画

按索引导航到幻灯片

【讨论】：