Как установить высоту адаптивного слайдера с помощью CSS перед загрузкой страницы

Что это

Ползунок jquery Cycle, который при загрузке окна и изменении размера окна использует комбинацию css и javascript для быстрого изменения размера всего.

Что не так

Когда страница загружается, ползунок имеет высоту 0, установленную в css (потому что я не знаю размер экрана, пока страница не загрузится), а затем использует js для изменения размера ползунка до соответствующей высоты и запуска слайд-шоу.

Однако это означает, что до тех пор, пока js не загрузится/не запустится, ползунок не виден, то есть он «выскакивает» в поле зрения, толкая содержимое под ним вниз. Похоже, это общая проблема с адаптивными слайдерами, такими как flexslider или cycle.

Есть ли способ установить высоту с помощью css?


person Houdmont    schedule 21.02.2012    source источник
comment
можете ли вы использовать простые методы CSS, такие как height:100% или что-то еще, чтобы просто сделать его видимым изначально?   -  person Jibi Abraham    schedule 21.02.2012
comment
@JibiAbraham К сожалению, нет, потому что изображения располагаются друг над другом, поэтому высота контейнера (если размер изображения составляет 100 x 100 пикселей и имеется 5 изображений) составляет 500 пикселей, что временно отображает все изображения до ползунка. JavaScript взял верх.   -  person Houdmont    schedule 21.02.2012


Ответы (1)


Я думаю, что версия 2 цикла вы ищете

http://jquery.malsup.com/cycle2/demo/autoheight.php

person Raul Valverde    schedule 11.10.2012