Witam,
na mojej stronie http://marcinjendrasik.pl/ jest slajder. Cała strona jest oparta na Framework-u Bootstrap. Zdjęcie w slajderze się skaluje prawidłowo. Do slajdera musiałem dodać kod js aby wysokość slajdera dostosowywała się do skalowalnego zdjęcia. Wszystko niby działa dobrze ale gdy parę razy zmniejszę maksymalnie okno i powiększę to wysokość slajdera przyjmuje wartość 0px :( .Co mógłbym zrobić żeby to naprawić . Pozdrawiam :)
<div class="row slajderWysokosc">
<div class="col-lg-12">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/1.jpg" alt="...">
<div class="carousel-caption">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, quod?
</div>
</div>
<div class="item">
<img src="img/2.jpg" alt="...">
<div class="carousel-caption">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, quo.
</div>
</div>
<div class="item">
<img src="img/3.jpg" alt="...">
<div class="carousel-caption">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, atque.
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
LESS
.carousel{
max-height: 643px;
overflow: hidden;
.carousel-indicators{
z-index: 1;
.active{
width: 17px;
height: 17px;
}
li{
border:1px solid rgb(130, 0, 0);
width: 15px;
height: 15px;
}
}
.carousel-caption{
top:50%;
font-size: 20px
}
}
.carousel img{
width: 100%;
}
function pobieranieWysokosci(){
return $('#carousel-example-generic').find('img').css('height').slice(0, -2);
}
$(window).resize(function() {
var wysokosc = pobieranieWysokosci();
$('.slajderWysokosc').find('#carousel-example-generic').css('height',wysokosc);
});