height: auto not display js image carousel

Question

Я читал об изменении размера изображений с использованием max-width: 100% и высоты auto, и он отлично работает для меня с одним изображением, однако, если я использую это на изображениях в карусели js I нужно установить размеры для высоты, иначе изображения не будут отображаться? Возможно ли что-то в файле js? Вот мой html & css .. Спасибо за вашу помощь!

<div id="slider"> 

     <ul class="slider"> 
      <li><img src="img/img4.jpg" style="max-width:100%; height:auto;" /></li> 

      <li><img src="img/img5.jpg" style="max-width:100%; height:auto;"/></li> 

     </ul> 

    </div> 



#slider {margin: 0 auto; 


} 

.slider {margin: 0 auto; 
      position: relative; 
      overflow: hidden; 
      width:100%; 
      height:400px; 


} 

.slider li {display: none; 
      position: absolute; 
      top: 0; 
      left: 0; 

} 

Answer 1

Элементы li внутри ползунка имеют абсолютное позиционирование, поэтому они и элементы внутри свободно расположены. Это примерно означает, что они не заполняют элемент слайда, который является грустным и пустым.

Я думаю, вы хотите супер быстрый ответ с jsfiddle на него, но если у вас есть какое-то время, прочитать:

http://alistapart.com/article/css-positioning-101/

И для быстрых решений, использовать пользовательский слайдер:

https://github.com/bradbirdsall/Swipe

Answer 2

Я не могу точно знать вашу проблему, потому что вы не дали js. Однако, если вы хотите сделать отзывчивый слайд, это один из лучших плагинов для вас http://docs.dev7studios.com/caroufredsel-old/