Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Twitter Bootstrap carousel different height images cause bouncing arrows

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">&lsaquo;</a>     <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</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?

like image 758
steve-gregory Avatar asked Nov 15 '12 04:11

steve-gregory


People also ask

How do I change the height of a carousel in bootstrap 5?

It would simply be called with: $("#slider . carousel-inner"). normalizeHeight(); $(window).

What size should bootstrap carousel images be?

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.

How do I stop auto sliding in bootstrap 5 carousel?

$('. carousel'). carousel({ interval: false, }); That will make the auto sliding stop because there no Milliseconds added and will never slider next.


1 Answers

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.

like image 136
jduprey Avatar answered Oct 05 '22 10:10

jduprey