2015-05-15 3 views
3

Я строю слайдер с slick, чем 10 слайдеров. Каждый из них представляет собой фрагмент горизонтального слайда изображения.slickGoTo не работает во время анимации

Если один из них щелкнут, то все они должны сдвинуться к одному и тому же случайному индексу с помощью 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> 

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

ответ

6

Мне нужно установить waitForAnimate: false Этот параметр был в мерзавца РЕПО ReadME, а не на сайте.