Twitter Bootstrap - Carousel, change director in carousel

Default carousel in twitter bootstrap slice left to right or right to left.
But some time we want change direction of carousel top to down or down to top.
This is link page that I copy http://www.bootply.com/63148

This is code HTML
<div class="container">
  <div class="row-fluid">
    <div class="span12 text-center">
    <div class="page-header">
              <h1>Carousel vertical Bootstrap slider</h1><p class="lead">More Bootstrap examples carousels effects on: <a href="http://bootstrap-tutorial.bootstraptor.com/post/53267372726/creating-a-carousel">Bootstrap tutorial</a></p>
  </div>
    </div>
  </div>
      
    <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>
  <hr>
  <div class="row"><a class="btn btn-block btn-info" href="http://bootstrap-tutorial.bootstraptor.com/">Read More Bootstrap tutorials</a></div>
<hr>
</div>


This is CSS code. It is important because it use css to show top or down.
.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;
}

And the end is JS

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

 Now you can run.

Good luck to you.