Ресайз слайдер при изменении ширины окна [РЕШЕНО]
 

Написан плагин слайдера на 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>

а что именно должно изменится?

область слайдера и изображения в нем должны уменьшатся/увеличиваться при изменении ширины окна. max-width допустим 1024px и min-width 320px допустим.

Пробовал через .resize() сделать, но ничего не вышло в конечном итоге.

Вся проблема в том, что размеры холста просчитываются в самом начале при загрузке и во время работы слайдера к ним больше не обращаемся, дальше работает только var nextSlide = function() и var prevSlide = function()

Смотрел код готовых слайдеров с данным функционалом, но там столько функционала навешано, что в итоге очень запутано все.

falkone,
а css текущее? -- конечно лучше бы сразу весь макет )))

Прикрепил архив с исходником.

falkone,
вариант
строка 11 первый пост добавить

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

css margin: 20px auto;

.sliderWrapper {
	width: 1000px;
	margin: 20px auto;
	overflow: hidden;
	position: relative;
}

на всякий случай вместо зип лучше в песочницу сразу
http://plnkr.co/edit/?p=preview или сюда

рони,
Когда увидел твое сообщение в теме, сразу понял, что будет помощь в решении, так как давно заметил тебя во многих темах и дельные правильные ответы от тебя!

Большое спасибо, все работает как часы) Немножко подправил на максимальную ширину слайдера и все супер! Еще раз спасибо!:thanks: