title: How to smooth transition between elements of different heights in Bootstrap carousel
body: <p>I am building a Bootstrap carousel for a project. The content of the slides have different heights. Currently, the transition animation for the different sized content is very choppy. I am wondering if there is any way to fix this transition and make it a bit more graceful/smooth as the carousel adjusts in height between the slides.</p>
  
  <p>*Please note that I would like to maintain the different heights between the slides. They are sized that way for a reason that is essential to the project.</p>
  
  <p><a href="https://jsbin.com/vekeguxezi/edit?html,output" rel="nofollow noreferrer">Please see an example of the choppy transition on JS Bin.</a></p>
  
  <p>Here is the code for the carousel:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;title&gt;Bootstrap Carousel&lt;/title&gt;
    &lt;!-- Latest compiled and minified CSS --&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
    &lt;!-- Optional theme --&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"&gt;
    &lt;!-- jQuery --&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;!-- Latest compiled and minified JavaScript --&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="carousel-example-generic" class="carousel slide" data-ride="carousel"&gt;
    &lt;!-- Indicators --&gt;
    &lt;ol class="carousel-indicators"&gt;
      &lt;li data-target="#carousel-example-generic" data-slide-to="0" class="active"&gt;&lt;/li&gt;
      &lt;li data-target="#carousel-example-generic" data-slide-to="1"&gt;&lt;/li&gt;
      &lt;li data-target="#carousel-example-generic" data-slide-to="2"&gt;&lt;/li&gt;
    &lt;/ol&gt;
  
    &lt;!-- Wrapper for slides --&gt;
    &lt;div class="carousel-inner" role="listbox"&gt;
      &lt;div class="item active"&gt;
        &lt;img style="margin: 0 auto;" src="http://placehold.it/300x300"&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;img style="margin: 0 auto;" src="http://placehold.it/250x250"&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;img style="margin: 0 auto;" src="http://placehold.it/160x600"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
        &lt;!-- Controls --&gt;
        &lt;a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"&gt;
      &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"&gt;
      &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Next&lt;/span&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>