Javascript Bootstrap 轮播动画从上到下而不是从左到右

Bootstrap carousel animate top to bottom instead of left to right

提问by Aamir Shahzad

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.

bootstrap carousel 中是否有任何选项可以将其动画化为从上到下和从下到上，而不是从右到左和从左到右。

jsFiddle

js小提琴

<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>

回答by tomloprod

You can get change the direction of carousel using this code (The JSFiddle example at the end)

您可以使用此代码更改轮播的方向（最后的 JSFiddle 示例）

Pay attention to the CSS verticalclass selector

注意 CSSvertical类选择器

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

CSS：（轮播方向变化的本质）

.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:

Javascript：

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

HTML:

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/

你可以在这里看到它的实际效果：http: //jsfiddle.net/wram2h2p/