Как сделать слайдер адаптивным?

Здравствуйте есть слайдер
<div id="slider-wrap" class="hidden-xs">
	<div id="slider">
		<div class="slide"><img src="img/a1.jpg" class="img-responsive"></div>
		<div class="slide"><img src="img/a2.jpg" class="img-responsive"></div>
	</div>
</div>

С такими стилями
#slider-wrap{ /* оболочка слайдера и кнопок */
	width:100%; 

	}
#slider{ /* оболочка слайдера */
	width:100%;
	height:300px;
	overflow: hidden;
	position:relative;
	box-shadow: 7px 7px 5px rgba(0,0,0,0.6); /* Тень */
	}
.slide{ /* слайд */
	width:100%;
	height:100%;
	}

Как его сделать адаптивным? Если меняю height:300px; на height:auto; или 100% То слайдер не отображается, если ставлю min-height:300px; то тень уходит от изображения. Помогите решить проблему.
  • Вопрос задан
  • 163 просмотра
Решения вопроса 1
@ps1panda
Верстальщик, начинающий front-end
Попробуй через javascript высоту задавать пр ресайзе
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
А слайдер откуда взят?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы