javascript - 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>