Всем доброго времени суток, народ! Предупрежу сразу, я больше по Python специализируюсь. JS не знаю совсем. Однако возникла необходимость срочно сварганить несложный лэндинг. И у меня возникла проблема. В шапке сайта есть слайдер с фотографиями, который на десктопах должен отображаться на всю доступную высоту экрана. Изначально для того чтобы выставить высоту слайдера я использовал код jQuery (его приведу ниже). Для быстроты верстки использую Bootstrap 4. Вот код слайдера:
<div id="mySlider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#mySlider" data-slide-to="0" class="active"></li>
<li data-target="#mySlider" data-slide-to="1"></li>
<li data-target="#mySlider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/1.png" alt="" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="images/2.png" alt="" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="images/3.png" alt="" class="d-block w-100">
</div>
</div>
<div class="overlay"></div>
<a href="#mySlider" class="carousel-control-prev" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a href="#mySlider" class="carousel-control-next" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Однако при уменьшении размера окна браузера всплыла одна нехорошая особенность фотографий, которые используются в слайдере: высоты изображения не хватает чтобы заполнить весь слайдер. Поэтому было принято решение для маленьких экранов убирать слайдер вовсе. Тут мне пришлось дописать на jQuery еще одну функцию, которая скрывает слайдер если размер самого слайдера превысил размер div, содержащего фотографию. Вот собственно весь мой дилетантский JS-код:
function setSliderHeight() {
$('#mySlider').css({
height: $(window).height() - 92 + 'px' // 92 - высота меню
});
}
function checkHeight() {
if ($('#mySlider').height() > $('.d-block').height()) {
$('#mySlider').hide();
} else {
$('#mySlider').show();
}
}
setSliderHeight();
checkHeight();
$(window).resize(setSliderHeight, checkHeight);
Все работает отлично, если открыть окно браузера на весь экран и начать уменьшать размер пока слайдер не пропадет. Однако, если потом снова увеличить размер окна браузера слайдер не появляется. Насколько я понимаю, метод hide() использует CSS-свойство display: none. Я пробовал просто менять CSS свойства вместо использования методов hide() и show(). В случае с display: none и display: block все работало аналогично. Пробовал также менять CSS-свойства opacity: 0 и height: 0, когда нужно было скрыть элемент, однако это решение работало как-то криво. В чем может быть проблема? Может быть есть способ сделать это не с помощью JS?
Простой
