Обновление позиции с изменением ширина окна браузера
Вложений: 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. Заранее спасибо! П.С. во вложениях не совсем доработанный "прототип". |
Плавность, выходит за счёт того, что у слайдов всегда есть соседи, т.е. нужно клонировать первый и последний элемент и расставить их противоположно (если уже нужна циклическая прокрутка).
Проблема решена. |
Часовой пояс GMT +3, время: 22:51. |