[falkone]

Написан плагин слайдера на jQuery, сам плагин простой и ничего особенного, но задался вопросом как сделать его еще и резиновым, в самом плагине все данные размеров высчитываются в самом начале и больше не затрагиваются. Как можно это более правильно реализовать?

Или возможно разметкой в CSS это все сделать?

(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);

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