Bootstrap Carousel height goes to zero

Seems the height of my carousel goes to zero when I click on either arrow. See the example here (the carousel is at the bottom of the page):

Watching the live HTML, the height of the carousel is being animated down to zero, then back up again.

<div style="margin: 0px 0px 20px; position: relative; overflow: hidden;
     height: 0px;">

What carousel code are you using?

It’s not so much that the containing div height goes to zero, but rather that the carousel seems to be setting its top margin to cycle between 0 and negative imgheight… though i’m afraid i cant really explain why. If i lock/override the top margin of the carousel, it works as intended.

<div id="myCarousel" class="carousel slide"><ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol><!-- Carousel items -->
<div class="carousel-inner">
<div class="active item"><img src="images/sampledata/parks/animals/800px_phyllopteryx_taeniolatus1.jpg" alt="800px phyllopteryx taeniolatus1" /></div>
<div class="item"><img src="images/sampledata/parks/animals/800px_koala_ag1.jpg" alt="800px koala ag1" /></div>
<div class="item"><img src="images/sampledata/parks/animals/789px_spottedquoll_2005_seanmcclean.jpg" alt="789px spottedquoll 2005 seanmcclean" /></div>
<!-- Carousel nav --><a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a></div>

I’m using bootstrap 2 carousel code

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.