Здравствуйте! Делаю свой 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.
Заранее спасибо!
П.С. во вложениях не совсем доработанный "прототип".
