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

Question

[Павел Рожков]

Здравствуйте есть слайдер

<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; то тень уходит от изображения. Помогите решить проблему.

Answer 1

[Дмитрий Пыркин]

Попробуй через javascript высоту задавать пр ресайзе

Comments

[Павел Рожков]

А можно подробнее как это сделать? Новичок просто в этом деле.

[Дмитрий Пыркин]

НУ нужно понять какое соотношение сторон тебе нужно
а потом писать

$('#slider').height($('#slider').width()*1.7)
$(window).resize(function(){
$('#slider').height($('#slider').width()*1.7)
})

[Павел Рожков]

Размер изображения 900 на 300 px

[Дмитрий Пыркин]

Павел Рожков: берешь делишь 300 на 900 и подставляешь вместо 1.7

Answer 2

[Максим Верховный]

А слайдер откуда взят?

Comments

[Дмитрий Пыркин]

гугл

[Максим Верховный]

по другому вопрос поставлю это готовый плагин как slick или просто взят код с какого-то ресурса?