Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Обновление позиции с изменением ширина окна браузера (https://javascript.ru/forum/jquery/44069-obnovlenie-pozicii-s-izmeneniem-shirina-okna-brauzera.html)

RuBAN 05.01.2014 00:35

Обновление позиции с изменением ширина окна браузера
 
Вложений: 1
Здравствуйте! Делаю свой JQuery слайдер, который должен работать во всю ширину блока, но при изменении самой ширины не могу добиться плавной смены позиции контейнера со слайдами (проблема видна в Chrome, в IE 11 работает на ура).
Сейчас поясню.
Есть html-код:
<div class="slides">
	<div class="slider-container">
		<figure>....</figure>
		<figure>....</figure>
	</div>
</div>

При нажатии кнопок влево/вправо slider-container меняет свою позицию (влево на +ширина .slides или влево на -ширина .slides), т.е. что-то по типу киноленты получается.
Для фиксирования изменения ширины окна браузера, я использую следующую обработку:
$(window).bind('resize', function() {
	pred = $(block).innerWidth();
	$(item).width(pred);
	$(cont).css({left: (-1)*pred*acs + 'px'});
}).trigger('resize');

Где $block - .slides, $item - figure, acs - индекс активного слайда, $cont - slider-container, pred - ширина .slides
И вот при смене ширины окна браузера, позиция $cont заметно меняется.
Как сделать плавную замену позиции? Можно, конечно, использовать вместо позиции left - translateX, но хочется, чтобы работало и для IE 8.

Заранее спасибо!

П.С. во вложениях не совсем доработанный "прототип".

RuBAN 05.01.2014 15:13

Плавность, выходит за счёт того, что у слайдов всегда есть соседи, т.е. нужно клонировать первый и последний элемент и расставить их противоположно (если уже нужна циклическая прокрутка).

Проблема решена.


Часовой пояс GMT +3, время: 22:51.