Slajder nie dostosowuje wysokości do skalowalnego w nim zdjęcia

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);
    });

może coś się gryzie z podstawowymi stylami bootstrapa?
próbowałeś zaimplementować gotowe rozwiązania z sieci?
jest tego trochę, wypróbuj i potem porównaj kod ze swoim

@czysteskarpety jest możliwość żebyś mi podał jakieś gotowe skrypty takiego przykładowego slajdera?W miarę do zrozumienia :)

Czy chodzi o taką zmianę?

function pobieranieWysokosci(){
  return $('#carousel-example-generic').find('.active>img').css('height').slice(0, -2);
}

Dokładanie!!Wielkie Dzięki @reptile333. Mam jeszcze pytanie:) A wiesz czemu mi się pokazuje na stronie głównej ten suwak do przesuwania w lewą i w prawą stronę na samym dole w oknie?Nie chce go :( :)