0

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);
});

})();

2 respuestas 2

0

Bueno tu problema es como mencionas que el intervalo se ejecuta mas veces de las que debería al presionar un botón, solo esablece nuevamente el valor de la variable interval cada vez que presiones un botón y debería funcionar:

function slide( dir, click ){

if ( click ){
    clearInterval(interval);

    interval = setInterval(function(){
        slide( 'next' );
    }, 2500);
}

( 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);

}
0

En jQuery tienes el método .stop() que se utiliza para terminar la animación en el elemento indicado en el selector. Este método puede recibir dos parámetros booleanos opcionales:

  • El primero para indicar si debe borrarse la cola de animaciones
  • El segundo para indicar si quieres que el elemento salte al final de la animación al pararla.

Por defecto ambos tiene el valor false, si quieres purgar la cola de animaciones y que salte al final de la animación actual, vas a tener que indicarlo usando .stop(true, true).

Con eso en mente, cuando realizas la llamada a la animación:

slider.animate({
    marginLeft: margin
}, 450);

puedes parar las animaciones anteriores poniendo .stop() al principio. De ese modo se dejará de ejecutar la animación actual antes de añadir la nueva a la cola de animaciones.

slider.stop().animate({
    marginLeft: margin
}, 450);

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.