jquery 슬라이더 반응 문제

Question

저는 jQuery의 초보자입니다. 반응 슬라이더를 만들기 위해 노력하고 있었지만 작동하고 있지만 몇 가지 버그를 수정하고 싶습니다. 우선 다음 사진을 몇 번 통과하면됩니다. 흰색으로 바뀌면 더 이상 작동하지 않으며 두 번째로 빨라지면서 빨라집니다.

제안 사항? 당신은 슬라이딩 빈 페이지를 제거하려면

.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

이 변경 :

position: relative; 

하려면 :

변경

.carrusel에서

position: absolute; 

그리고 m 빨리를 만들기 위해 필요에 따라

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

변경

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

사람 : 변화, 더 빨리 아케!

Demo