A bootstrap carousel is animated from top to bottom, not left to right

Question

Is there any parameter in the carousel download to animate it from top to bottom and from bottom to top, and not from right to left and left to right.

jsFiddle

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1" class=""></li>
        <li data-target="#myCarousel" data-slide-to="2" class=""></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <div class="container">
                <div class="carousel-caption">
                     <h1>Example headline.</h1>

                    <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="container">
                <div class="carousel-caption">
                     <h1>Another example headline.</h1>

                    <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="container">
                <div class="carousel-caption">
                     <h1>One more for good measure.</h1>

                    <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a>
                    </p>
                </div>
            </div>
        </div>
    </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
 <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>

</div>

Answer 1

You can change the carousel direction with this code (JSFiddle example at the end)

Check out the CSS class selector vertical

CSS: (the essence of changing the direction of the carousel)

.vertical .carousel-inner {
  height: 100%;
}

.carousel.vertical .item {
   -webkit-transition: 0.6s ease-in-out top;
   -moz-transition: 0.6s ease-in-out top;
   -ms-transition: 0.6s ease-in-out top;
   -o-transition: 0.6s ease-in-out top;
   transition: 0.6s ease-in-out top;
}

.carousel.vertical .active {
   top: 0;
}

.carousel.vertical .next {
   top: 400px;
}

.carousel.vertical .prev {
   top: -400px;
}

.carousel.vertical .next.left,
.carousel.vertical .prev.right {
   top: 0;
}

.carousel.vertical .active.left {
   top: -400px;
}

.carousel.vertical .active.right {
   top: 400px;
}

.carousel.vertical .item {
   left: 0;
}

JavaScript:

$('.carousel').carousel({
   interval: 3000
})

HTML:

<div class="container">
    <div class="row-fluid">
        <div class="span6 offset3">
            <div id="myCarousel" class="carousel slide vertical">
                <!-- Carousel items -->
                <div class="carousel-inner">
                    <div class="active item">
                        <img src="http://placehold.it/600x400&amp;text=First+Slide">
                    </div>
                    <div class="item">
                        <img src="http://placehold.it/600x400&amp;text=Second+Slide">
                    </div>
                    <div class="item">
                        <img src="http://placehold.it/600x400&amp;text=Third+Slide">
                    </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>
        </div>
    </div>
</div>

You can see it in action here: http://jsfiddle.net/wram2h2p/