Salto entre último y primer slide de Slick, no funciona la transición

Salto entre último y primer slide de Slick, no funciona la transición

13 de abril 2022

Slick es una librería de JavaScript que nos permite de un modo bastante sencillo crear carruseles para proyectos web. Nos permite diferentes configuraciones por defecto, una de ellas centrar el elemento activo durante la navegación por el carrusel. Esto nos permite añadir algún tipo de animación para que se reproduzca cuando se cambia entre uno y otro. Una aclaración antes de seguir, a cada elemento del carrusel voy a llamarlo indistintamente elemento, slide o diapositiva. Al propio carrusel lo llamaré también slider o pase de diapositivas. Diferentes palabras pero misma cosa.

Pues bien, el otro día tuve la necesidad de crear un componente de este tipo, es decir, centrado y que además fuera infinito. De este modo el primer y último slide deben coincidir para que se genere el efecto de no haber fin. Esto lo hace Slick clonando mediante JavaScript los últimos elementos y ubicandolos a la izquierda del primero. Hasta aquí todo bien, la librería instalada correctamente así como jQuery, que es necesario para que todo funcione. El pase de diapositivas se ejecuta correctamente y añado con CSS los estilos adecuados para que se genere un efecto de ampliación cuando la primera diapositiva esté centrada. Pero al llegar al final y tener que pasar de la última a la primera veo que la transición no funciona, lo que genera un salto brusco.

Tras probar diferentes combinaciones con CSS no consigo solucionar el problema, busco información sobre la situación y encuentro que parece tratarse de un bug que nunca se ha llegado a corregir. Está relacionado con los elementos clonados que comentaba antes y una posible manera de corregirlo es añadiendo un controlador de eventos para modificarlos.



$(function() {
	$('.clase-del-carrusel').slick({
		// Opciones habituales de Slick
	}).on('beforeChange', (event, slick, currentSlide, nextSlide) => {
		if (currentSlide !== nextSlide) {
			document.querySelectorAll('.slick-center + .slick-cloned').forEach((next) => {
				// timeout required or Slick will overwrite the classes
				setTimeout(() => next.classList.add('slick-current', 'slick-center'));
			});
		}
	});
});

Aquí podéis ver el hilo en Stack Overflow por si queréis darle un vistazo.

Publicado por Jesús Tovar

Categorías: JavaScript, Programación

Etiquetas: ,

Deja una respuesta

Tu dirección de correo electrónico no será publicada.