javascript - slickGoTo wont work during animation - Stack Overflow

admin管理员组

文章数量:1327665

I am building a slider with slick than is 10 sliders. Each one is a slice of a horizontal slide of an image.

If one of them is clicked then they should all slide to the same random index with slickGoTo. However if a slide is currently being animated that one slider finishes it's animation instead of going to the proper slide.

I tried to stop the animation with $('.slick-track').stop(true, true); but that doesn't work.

Any ideas on how I can get slickGoTo to go to the right slide or stop the animation and then call 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>

JS

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

I am building a slider with slick than is 10 sliders. Each one is a slice of a horizontal slide of an image.

If one of them is clicked then they should all slide to the same random index with slickGoTo. However if a slide is currently being animated that one slider finishes it's animation instead of going to the proper slide.

I tried to stop the animation with $('.slick-track').stop(true, true); but that doesn't work.

Any ideas on how I can get slickGoTo to go to the right slide or stop the animation and then call 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>

JS

$(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

Share Improve this question Follow asked May 15, 2015 at 9:00 YamikoYamiko 5,45355 gold badges3131 silver badges5353 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

I needed to set waitForAnimate: false This option was in the git repos readme and not on the website.

For example:

$('.class').slick('slickGoTo', 2, true); will not animate

and

$('.class').slick('slickGoTo', 2, false); will animate

The docs say:

slickGoTo

Arguments : int : slide number, boolean: dont animate

Navigates to a slide by index

本文标签： javascriptslickGoTo wont work during animationStack Overflow