Tengo un slider el cual está basado en una ul con imágenes dentro y mostrará las mismas cambiando el margen de la lista. Además están los típicos botones de lado (anterior/siguiente ) por si no se quiere esperar la animación.
He seteado un intervalo para que al cargar la página el slider vaya solo con un animate(), y limpiar el intervalo al clicar en uno de los botones para parar la animación. Luego con un timeout he hecho un reset para que el slider vuelva a animarse pasado los 4 segundos.
Mi problema esta que al presionar, ejemplo 2 veces uno de los botones, se limpia el intervalo pero luego el animate() se ejecuta 2 veces también y no encuentro el fallo. Es como si se seteara 2 veces el intervalo creado con el "timeout".
Dejo el código actual:
( function(){
var slider = $( '.slider' );
var slides = slider.find("li").length;
var actual = 0;
var width = 310;
var interval = setInterval( function(){
slide( 'next' );
}, 2500 );
function slide( dir, click ){
if ( click ){
clearInterval( interval );
clearInterval( restart );
var restart ;
var timer = setTimeout ( function(){
clearTimeout(restart);
restart = setInterval( slide, 1500, 'next' );
}, 4000 );
}
( dir === "next" ) ? actual -- : actual ++;
if ( actual > 0 ) {
actual = ( slides - 1 ) * -1;
}else if ( actual <= ( slides * -1 ) ) {
actual = 0;
}
var margin = actual * width;
slider.animate({
marginLeft: margin
}, 450);
}
$('.btn-slide').on('click', function () {
var dir = $(this).data("mov");
//when the button is pressed we send "true" for the "click" argument
slide( dir , true);
});
})();