Quiero poder saltar a la siguiente diapositiva al instante y sin más transiciones.
Actualmente, esto solo funciona entre las transiciones, pero ¿cómo hacer que funcione durante una transición? En otras palabras, idealmente necesito algo como $('.slick').slick("finishTransition")
Véase violín .
<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) });Después de investigar un poco, encontré una opción de configuración adicional que debería permitirle usar los métodos internos como desee mientras anima.
waitForAnimate: false,He incluido su violín solo con este cambio y parece proporcionar el resultado deseado.
Está documentado en la página de proyectos de github: https://github.com/kenwheeler/slick/
Probablemente necesitará experimentar cómo hacer que funcione, pero esta configuración finalmente liberará las solicitudes que realiza durante las animaciones.
https://jsfiddle.net/uhkagr7n/
La configuración completa para referencia:
$('.slick').slick({ infinite: true, speed: 5000, slidesToShow: 1, centerMode: true, variableWidth: true, autoplay: true, autoplaySpeed: 200, prevArrow: '', nextArrow: '', waitForAnimate: false, });El siguiente código debería funcionar. Tienes que deshabilitar dinámicamente la opción waitForAnimate . Y era necesario borrar setInterval's ya que la reproducción automática se estaba estropeando. Eso podría necesitar algunos ajustes.
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) }); });intente configurar la reproducción automática en falso:
$('.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) });