title: Bootstrap carousel animate top to bottom instead of left to right
body: <p>Is there any option in bootstrap carousel to animate it to top to bottom and bottom to top, instead of right to left and left to right.</p>
  
  <p><strong><a href="https://jsfiddle.net/9fwuq/403/" rel="noreferrer">jsFiddle</a></strong></p>
  
  <pre><code>&lt;div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false"&gt;
      &lt;!-- Indicators --&gt;
      &lt;ol class="carousel-indicators"&gt;
          &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="1" class=""&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="2" class=""&gt;&lt;/li&gt;
      &lt;/ol&gt;
      &lt;div class="carousel-inner"&gt;
          &lt;div class="item active"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="carousel-caption"&gt;
                       &lt;h1&gt;Example headline.&lt;/h1&gt;
  
                      &lt;p&gt;&lt;a class="btn btn-lg btn-primary" href="#" role="button"&gt;Sign up today&lt;/a&gt;
                      &lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="carousel-caption"&gt;
                       &lt;h1&gt;Another example headline.&lt;/h1&gt;
  
                      &lt;p&gt;&lt;a class="btn btn-lg btn-primary" href="#" role="button"&gt;Learn more&lt;/a&gt;
                      &lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="carousel-caption"&gt;
                       &lt;h1&gt;One more for good measure.&lt;/h1&gt;
  
                      &lt;p&gt;&lt;a class="btn btn-lg btn-primary" href="#" role="button"&gt;Browse gallery&lt;/a&gt;
                      &lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt; &lt;a class="left carousel-control" href="#myCarousel" data-slide="prev"&gt;&lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;&lt;/a&gt;
   &lt;a class="right carousel-control" href="#myCarousel" data-slide="next"&gt;&lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;&lt;/a&gt;
  
  &lt;/div&gt;
  </code></pre>