Take a look at my JavaScript code:
$('#carousel-container').bind("slide.bs.carousel", function () {
//reset the slideImg
$('.slideImg',this).css('min-height', '');
//set the height of the slider
var sliderHeight = $(this).height();
$(this).css('min-height', sliderHeight + 'px');
$(this).off("slide.bs.carousel");
//set the max height for images
$('.slideImg').css('max-height', (sliderHeight * 0.9) + 'px');
$('#Hand_Side').css('max-height', (sliderHeight * 0.4) + 'px');
});
And here is the corresponding HTML:
<div id="carousel-container" class="carousel slide container" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div id="slide1" class="item active">
</div>
<div id="slide3" class="item">
</div>
</div>
</div>
I'm facing an issue where the event only fires once before sliding to the first slide. Can anyone help me troubleshoot this problem?