Добрый день, написал простой jQuery плагин слайдера. Задался вопросом, как можно реализовать "резиновость" самого слайдера. Данные размеров слайдера считаются в самом начале и далее просто используется перелистывание в обе стороны. Как более правильно реализовать динамическое перестраивание размеров слайдера.
Код слайдера + html каркас jsfiddle.net
<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>
jQuery
(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);