I've been using Bootstrap's carousel class and it has been straightforward so far, however one problem I've had is that images of different heights cause the arrows to bounce up and down to adjust to the new height..
This is the code I'm using for my carousel:
<div id="myCarousel" class="carousel slide"> <div class="carousel-inner"> <div class="item active"> <img src="image_url_300height"/> <div class="carousel-caption"> <h4>...</h4> <p>...</p> </div> </div> <div class="item"> <img src="image_url_700height" /> </div> </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>
The problem is also illustrated in this jsfiddle (Admittedly not mine, I found this on a separate question while trying to solve this problem!)
My question is: How can I force the carousel to stay at a fixed height (second thumbnail in the fiddle) and center smaller images while keeping the captions and arrow in a static position relative to the carousel?
It would simply be called with: $("#slider . carousel-inner"). normalizeHeight(); $(window).
If you want to have a carousel image that spans the full width of the screen its probably a good idea to use an image that is at least 1024 px wide (possibly wider), though you don't want it to be too high resolution, since that would take a long time to load.
$('. carousel'). carousel({ interval: false, }); That will make the auto sliding stop because there no Milliseconds added and will never slider next.
It looks like bootstrap less/CSS forces an automatic height to avoid stretching the image when the width has to change to be responsive. I switched it around to make the width auto and fix the height.
<div class="item peopleCarouselImg"> <img src="http://upload.wikimedia.org/..."> ... </div>
I then define img with a class peopleCarouselImg
like this:
.peopleCarouselImg img { width: auto; height: 225px; max-height: 225px; }
I fix my height to 225px. I let the width automatically adjust to keep the aspect ratio correct.
This seems to work for me.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With