jquery slider responsive

Question

Je suis un débutant avec jQuery et j'essayais de faire un slider responsive et ça fonctionne mais j'ai quelques bugs que je veux corriger, tout d'abord quand passe à la photo suivante devient blanc et ne fonctionne plus, et deuxièmement, il commence à aller de plus en plus vite.

Des suggestions?

.mascara 
{ width: 100%; height: 100%; 
overflow: hidden; 
} 

.carrusel{ position: relative; width: 100%; height: 100%; } 

.carrusel li{ width:25%; height: 100%; float: left; background-repeat: no-repeat; background-position: center; background-size: cover; } 

<script src="jquery-2.0.3.min.js"></script> 
<script> 

var cantidadFotos = $('.carrusel li').size(); 

var incremento = $('.mascara').width(); 
var limite = (cantidadFotos-1) * incremento; 
var velocidad = 550; 

$('.carrusel').css('width', (cantidadFotos*100)+"%"); 
$('.carrusel li').css('width', incremento+"px"); 

var posX = 0; 

resize(); 

function resize() 
{ 
$(window).resize(function() { 
    incremento = $('.mascara').width(); 
    $('.carrusel li').css('width', incremento+"px"); 
    posX = -(incremento * imagenes); 
    $('.carrusel').css('left', posX+"px"); 
}); 

setInterval(function(){ nextFoto(); }, 3000);} 
var imagenes = 0; 
function nextFoto(){ 

    imagenes++; 
    posX+= -incremento; 

    if (posX<-limite){ 
     posX=0; 
     imagenes = 0; 
     $('.carrusel').css({ left: posX }); 
     } 
    $('.carrusel').animate({ left: posX},350); 
    // $('.carrusel').css({ left: posX}); 
    return false; 
} 
</script> 

Answer 1

Si vous voulez supprimer la page vide lorsque vous faites glisser, changer à ceci:

Dans .carrusel

Change:

position: relative; 

Pour:

position: absolute; 

Et à m Ake plus rapide, le changement:

setInterval(function() { 
     nextFoto(); 
    }, 3000); 

Pour

setInterval(function() { 
     nextFoto(); 
    }, 1000); 

changer en fonction de vos besoins pour le rendre plus rapide!

Demo