Twitter Bootstrap carousel different height images cause bouncing arrows

Question

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    lt div id  myCarousel  class  carousel slide  gt       lt div class  carousel-inner  gt           lt div class  item active  gt               lt img src  image url 300height   gt               lt div class  carousel-caption  gt                   lt h4 gt     lt  h4 gt                   lt p gt     lt  p gt               lt  div gt           lt  div gt           lt div class  item  gt               lt img src  image url 700height    gt           lt  div gt       lt  div gt       lt  -- Carousel nav -- gt       lt a class  carousel-control left  href   myCarousel  data-slide  prev  gt  amp lsaquo  lt  a gt       lt a class  carousel-control right  href   myCarousel  data-slide  next  gt  amp rsaquo  lt  a gt   lt  div gt    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

User · Answer

In case someone is feverishly googling to solve the bouncing images carousel thing  this helped me    fusion-carousel  fusion-carousel-item img       width  auto      height  146px      max-height  146px      object-fit  contain

User · Answer

You can use this lines in the css file   ul rn-carousel      gt  li    position  relative   margin-left  -100      amp  first-child      margin-left  0

User · Answer

Note that the jQuery solutions that normalize height on here may break with IE   After some testing  with Bootstrap 3  it looks like IE doesn t bother resizing images unless they re actually being rendered  If you make the window smaller  the image of the active item gets resized but the background images preserve their height  so the  tallest  height stays the same   In my case we were only rendering images on these items  and the images were only ever a few pixels off  So I opted to style all of the images with the height of the active image  Everything else gets resized to fit the height  so keep that in mind if your aspect ratios vary a lot       function carouselNormalization             var items       carousel  item             if  items length                function normalizeHeights                     let activeImageHeight   items filter   active   find  img   height                    items each function                           this  find  img   css  height    activeImageHeight    px                                                   normalizeHeights                   window  on  resize orientationchange   function                     items each function                           this  find  img   removeAttr  style                                        normalizeHeights                                          window  on  load   carouselNormalization

User · Answer

More recently I am testing this CSS source for the Bootstrap carousel  The height set to 380 should be set equal to the biggest tallest image being displayed     Please Vote up down this answer based on usability testing with the following CSS thanks      CUSTOMIZE THE CAROUSEL --------------------------------------------------        Carousel base class     carousel     max-height  100     max-height  380px    margin-bottom  60px    height auto       Since positioning the image  we need to help out the caption     carousel-caption     z-index  10      background  rgba 0  0  0  0 45         Declare heights because of positioning of img element     carousel  item     max-height  100     max-height  380px    background-color   777     carousel-inner  gt   item  gt  img        position  absolute      top  0    left  0    min-width  40     max-width  100     max-height  380px    width  auto    margin-right auto    margin-left auto    height auto

User · Answer

The solution given earlier leads to a situation where images may be too small for the carousel box  A proper solution to the problem of bumping controls is to override Bootstraps CSS   Original code    carousel-control   top  40       Override the variable with a fixed value inside your own stylesheet  300px worked in my design     carousel-control   top  300px      Hopefully this will solve your problem

User · Answer

If you want to have this work with images of any height and without fixing the height  just do this       myCarousel   on  slide bs carousel   function             carousel-control  this  css  top       active img  this  height   0 46   px           this  off  slide bs carousel

User · Answer

className   width  auto    height  200px    max-height  200px     max-width 200px    object-fit  contain

User · Answer

Here is the solution that worked for me  I did it this way as the content in the carousel was dynamically generated from user-submitted content  so we could not use a static height in the stylesheet  - This solution should also work with different sized screens   function updateCarouselSizes      jQuery   carousel   each function           I wanted an absolute minimum of 10 pixels     var maxheight 10       if jQuery this  find   item  carousel-item   length             We ve found one or more item within the Carousel          jQuery this  carousel       Initialise the carousel  include options as appropriate           Now we iterate through each item within the carousel          jQuery this  find   item  carousel-item   each function k v            if jQuery this  outerHeight   gt maxheight                 This item is the tallest we ve found so far  so store the result              maxheight jQuery this  outerHeight                                 Finally we set the carousel s min-height to the value we ve found to be the tallest          jQuery this  css  min-height  maxheight  px                   jQuery function      jQuery window  on  resize  updateCarouselSizes     updateCarouselSizes        Technically this is not responsive  but for my purposes the on window resize makes this behave responsively

User · Answer

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    lt div class  item peopleCarouselImg  gt     lt img src  http   upload wikimedia org      gt         lt  div gt    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

User · Answer

You can also use this code to adjust to all carousel images    carousel-item      width  100     width you want       height  500px    height you want       overflow  hidden     carousel-item img      width  100       height  100       object-fit  cover

User · Answer

Try this  I m using SASS     carousel     max-height  700px    overflow  hidden      item img       width  100       height  auto          You can wrap the  carousel into a  container if you wish

User · Answer

Try with this jQuery code that normalize Bootstrap carousel slide heights  x000D   x000D  function carouselNormalization       var items       carousel-example-generic  item      grab all slides     heights         create empty array to store height values     tallest    create variable to make note of the tallest slide    if  items length        function normalizeHeights           items each function       add heights to array         heights push   this  height                     tallest   Math max apply null  heights     cache largest value       items each function               this  css  min-height   tallest    px                         normalizeHeights           window  on  resize orientationchange   function           tallest   0  heights length   0    reset vars       items each function               this  css  min-height    0      reset min-height                 normalizeHeights      run it again                        Wait until all the assets have been loaded so a maximum height     can be calculated correctly      window onload   function       carouselNormalization      x000D   x000D   x000D

User · Answer

This jQuery function worked best for me   I m using bootstrap 4 within a WordPress theme and I ve used the full jQuery instead of jQuery slim      Set all carousel items to the same height function carouselNormalization          window heights         create empty array to store height values     window tallest    create variable to make note of the tallest slide      function normalizeHeights             jQuery   latest-blog-posts  carousel-item   each function       add heights to array             window heights push jQuery this  outerHeight                         window tallest   Math max apply null  window heights     cache largest value         jQuery   latest-blog-posts  carousel-item   each function                 jQuery this  css  min-height  tallest    px                          normalizeHeights         jQuery window  on  resize orientationchange   function               window tallest   0  window heights length   0    reset vars         jQuery   sc slides  item   each function                 jQuery this  css  min-height   0      reset min-height                       normalizeHeights      run it again               jQuery  document   ready function         carouselNormalization          Source   https   gist github com mbacon40 eff3015fe96582806da5

User · Answer

Include this JavaScript in your footer  after loading jQuery        item   css  min-height      item   height

[twitter-bootstrap] Twitter Bootstrap carousel different height images cause bouncing arrows

Examples related to twitter-bootstrap

Examples related to carousel