Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/386.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/68.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript slickGoTo在动画中不起作用_Javascript_Jquery_Html_Slider_Slick.js - Fatal编程技术网

Javascript slickGoTo在动画中不起作用

Javascript slickGoTo在动画中不起作用,javascript,jquery,html,slider,slick.js,Javascript,Jquery,Html,Slider,Slick.js,我正在用10个以上的滑块构建一个滑块。每一张都是图像水平幻灯片的一部分 如果单击其中一个,则它们应全部滑动到具有slickGoTo的相同随机索引。但是,如果幻灯片当前正在设置动画,则一个滑块将完成其动画,而不是转到正确的幻灯片 我试图用$('.slick track')停止动画但这不起作用 如何让slickGoTo转到右边的幻灯片或停止动画,然后调用slickGoTo HTML 我需要设置waitForAnimate:false此选项在git repos自述文件中,而不是在网站上。例如: $('

我正在用10个以上的滑块构建一个滑块。每一张都是图像水平幻灯片的一部分

如果单击其中一个,则它们应全部滑动到具有
slickGoTo
的相同随机索引。但是,如果幻灯片当前正在设置动画,则一个滑块将完成其动画,而不是转到正确的幻灯片

我试图用
$('.slick track')停止动画但这不起作用

如何让
slickGoTo
转到右边的幻灯片或停止动画,然后调用
slickGoTo

HTML


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

例如:

$('.class').slick('slickGoTo',2,true)
不会产生动画效果

$('.class').slick('slickGoTo',2,false)
将生动活泼

文件说:

slickGoTo

参数:int:幻灯片编号,布尔值:不设置动画

按索引导航到幻灯片

<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);
        });
    });
});