I want to be able to jump to the next slide instantly and without any further transition.
Currently this only works in between the transitions., but how to make it work during a transition? In other words I ideally need something like $('.slick').slick("finishTransition")
See fiddle.
<div class="slick">
<img src="http://placekitten.com/g/200/200" />
<img src="http://placekitten.com/g/200/200" />
<img src="http://placekitten.com/g/200/200" />
<img src="http://placekitten.com/g/200/200" />
<img src="http://placekitten.com/g/200/200" />
</div>
<a href="javascript:;" class='slick-next'>next</a>
$('.slick').slick({
infinite: true,
speed: 5000,
slidesToShow: 1,
centerMode: true,
variableWidth: true,
autoplay: true,
autoplaySpeed: 200,
prevArrow: '',
nextArrow: ''
});
$('.slick-next').click(function(){
$('.slick').slick("slickSetOption", 'speed', 1, true)
$('.slick').slick("slickNext")
$('.slick').slick("slickSetOption", 'speed', 5000, true)
});
After some digging I found an additional config option which should allow you to use the internal methods as you wish whilst animating.
waitForAnimate: false,
I've included your fiddle with this change only and it seems to provide the desired result.
It's documented on the projects github page: https://github.com/kenwheeler/slick/
You will probably need to experiment with how to make it performant, but this setting will ultimately free up the requests you make during animations.
https://jsfiddle.net/uhkagr7n/
The full config for reference:
$('.slick').slick({
infinite: true,
speed: 5000,
slidesToShow: 1,
centerMode: true,
variableWidth: true,
autoplay: true,
autoplaySpeed: 200,
prevArrow: '',
nextArrow: '',
waitForAnimate: false,
});
The following code should work. You have to dynamically disable the waitForAnimate option. And clearing setInterval's was needed as the autoplay was getting messed up. That might need some tweaking.
https://jsfiddle.net/ps41xqh4/47/
$('.slick').slick({
infinite: true,
speed: 5000,
slidesToShow: 1,
centerMode: true,
variableWidth: true,
autoplay: true,
autoplaySpeed: 300,
prevArrow: '',
nextArrow: '',
waitForAnimate: true
});
$('.slick-next').click(function(event) {
for (i = 0; i < 9999; i++) {
window.clearInterval(i);
}
$('.slick').slick("slickSetOption", 'autoplay', false, true)
$('.slick').slick("slickSetOption", 'speed', 1, true)
$('.slick').slick("slickSetOption", 'waitForAnimate', false, false)
$('.slick').slick("slickGoTo", $('.slick').slick('slickCurrentSlide'))
$('.slick').one('afterChange', function(e, s, c) {
$('.slick').slick("slickSetOption", 'speed', 5000, true)
$('.slick').slick("slickSetOption", 'autoplay', true, true)
$('.slick').slick("slickSetOption", 'waitForAnimate', true, false)
});
});
try to set the autoplay to false:
$('.slick').slick({
infinite: true,
speed: 5000,
slidesToShow: 1,
centerMode: true,
variableWidth: true,
autoplay: false,
prevArrow: '',
nextArrow: ''
});
$('.slick-next').click(function(){
$('.slick').slick("slickSetOption", 'speed', 1, true)
$('.slick').slick("slickNext")
$('.slick').slick("slickSetOption", 'speed', 5000, true)
});