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);
});
});
});
Share
Improve this question
asked May 15, 2015 at 9:00
YamikoYamiko
5,4535 gold badges31 silver badges53 bronze badges
2 Answers
Reset to default 9I 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
版权声明:本文标题:javascript - slickGoTo wont work during animation - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742223561a2435609.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论