jquery - レスポンシブ デザインの jQuery スライダー

Question

サイトをレスポンシブにしたいので、画像を 3 つの異なるサイズのスプライト画像に変更しました。

今、私はこのコードを持っており、すべての画像の幅が 600px の場合に機能しますが、今は

left: '-=600px'変更するには、slideWidth が必要です。しかし、どうすればそれを行うことができますか？

$(function() {
    var slides = $('.slide');
    var numberSlides = slides.length;
    var slideWidth = $('.slide').width();
    var wrap = $('#slideWrap')

    wrap.width(numberSlides * slideWidth);

    function moveMent() {
        for(r=0; r<100; r++) {
            for(i=0; i<numberSlides-1; i++) {
                wrap
                    .delay(3000)
                    .fadeTo(500, 0)
                    .animate({  
                    /*THIS NEEDS TO BE CHANGED:*/            
                        left : '-=600px'
                    })
                    .fadeTo(500, 1) 
            }
            wrap.delay(3000).fadeTo(500, 0).animate({left : '0'}).fadeTo(500, 1);
        }
    };

    moveMent(); 

 });