我正在使用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>
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);
});
});
});
答案 0 :(得分:6)
我需要设置waitForAnimate: false
此选项位于git repos自述文件中,而不是在网站上。
答案 1 :(得分:0)
例如:
$('.class').slick('slickGoTo', 2, true);
不会动画
和
$('.class').slick('slickGoTo', 2, false);
会动画
文档说:
slickGoTo
参数:整数:幻灯片编号,布尔值:不设置动画
按索引导航到幻灯片