Javascript 如何实现滑块大小的动态重建

下午好，我写了一个简单的jQuery插件滑块。我在问一个关于如何实现滑块的“橡胶”的问题。有关滑块大小的数据在开始时设置和计数，然后在两侧使用简单的翻转。如何实现滑块大小的动态重建

<div class="sliderWrapper">
    <div id="slider">
        <div class="slider_left"></div>
        <div class="slider_right"></div>
        <ul class="sliderItemWrapper">
            <li class="slider-item">
                <a href="#">
                    <img src="assets/porsche.jpg" alt="porsche-356" class="slider-img" />
                </a>
            </li>
            <li class="slider-item">
                <a href="#">
                    <img src="assets/porsche.jpg" alt="porsche-356" class="slider-img" />
                </a>
            </li>
            <li class="slider-item">
                <a href="#">
                    <img src="assets/porsche.jpg" alt="porsche-356" class="slider-img" />
                </a>
            </li>
            <li class="slider-item">
                <a href="#">
                    <img src="assets/porsche.jpg" alt="porsche-356" class="slider-img" />
                </a>
            </li>
        </ul>
    </div>
</div>

(function($) {

$.fn.slide = function() {
    var el = this,
        lengthSlides = $(this).find('.slider-item').length,
        widthSlide = $(this).find('.slider-item').width(),
        widthSlides = widthSlide * lengthSlides,
        currentSlide = 1;

    $(this).find('.sliderItemWrapper').width(widthSlides);

    var init = function() {
        var inter = setInterval(nextSlide, 3000);
        $(el).hover(function() {
            clearInterval(inter);
        }, function() {
            inter = setInterval(nextSlide, 3000);
        });
        $(el).find('.slider_left').click(prevSlide);
        $(el).find('.slider_right').click(nextSlide);
    }

    var nextSlide = function() {
        if ( currentSlide == lengthSlides ) 
            currentSlide = 0;
        $(el).find('.sliderItemWrapper').animate({
            'left': - (currentSlide * widthSlide)
        }, 700);
        currentSlide++;
    }

    var prevSlide = function() {
        currentSlide--;
        if ( currentSlide == 0 )
            currentSlide = lengthSlides;
        $(el).find('.sliderItemWrapper').animate({
            'left': - ((currentSlide - 1) * widthSlide)
        }, 700);
    }

    init();
};})(jQuery);

$(window).resize(function() {
        var w = $(window).width()- 40;
        $(el).width(w);
        $(el).css({left: 0})
        $(el).find('.slider-item, img').width(w) ;
        $('.sliderWrapper').width(w)
        widthSlide = w;
        widthSlides = widthSlide * lengthSlides ;
        $(el).find('.sliderItemWrapper').width(widthSlides);}).resize()