是否可以使用Twitter Bootstrap实现垂直走马灯滑动？在bootstrap.js中我找到了这个：
, slide: function (type, next) {
var $active = this.$element.find('.active')
, $next = next || $active[type]()
, isCycling = this.interval
, direction = type == 'next' ? 'left' : 'right'
, fallback = type == 'next' ? 'first' : 'last'
, that = this
我尝试将方向更改为“上”和“下”，但滑动不起作用。
下面是一种“hacky”的方法，通过覆盖CSS来完成所有操作。
如果您为轮播添加一个vertical类，那么将以下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: 100%;
}
.carousel.vertical .prev {
top: -100%;
}
.carousel.vertical .next.left,
.carousel.vertical .prev.right {
top: 0;
}
.carousel.vertical .active.left {
top: -100%;
}
.carousel.vertical .active.right {
top: 100%;
}
.carousel.vertical .item {
left: 0;
}
这基本上是将carousel.less 中的所有内容更改为使用top而不是left。
这至少说明了您需要做什么才能使其垂直滑动。但是，在实践中，一个人确实应该向carousel.less添加up和down类，并向bootstrap-carousel.js添加一个新选项在它们之间切换。
之前的答案提供的解决方案在一些流行浏览器（比如Google Chrome）和最新版本的Bootstrap（v3.3.4）一起使用时无法正常工作。
如果有人需要一个可以与Bootstrap v3.3.4一起使用的更新解决方案，这里是 --
.carousel-inner.vertical {
height: 100%;
}
.carousel-inner.vertical > .item {
-webkit-transition: .6s ease-in-out top;
-o-transition: .6s ease-in-out top;
transition: .6s ease-in-out top;
}
@media all and (transform-3d),
(-webkit-transform-3d) {
.carousel-inner.vertical > .item {
-webkit-transition: -webkit-transform .6s ease-in-out;
-o-transition: -o-transform .6s ease-in-out;
transition: transform .6s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000;
}
.carousel-inner.vertical > .item.next,
.carousel-inner.vertical > .item.active.right {
top: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
.carousel-inner.vertical > .item.prev,
.carousel-inner.vertical > .item.active.left {
top: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
.carousel-inner.vertical > .item.next.left,
.carousel-inner.vertical > .item.prev.right,
.carousel-inner.vertical > .item.active {
top: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.carousel-inner.vertical > .active {
top: 0;
}
.carousel-inner.vertical > .next,
.carousel-inner.vertical > .prev {
top: 0;
height: 100%;
width: auto;
}
.carousel-inner.vertical > .next {
left: 0;
top: 100%;
}
.carousel-inner.vertical > .prev {
left: 0;
top: -100%
}
.carousel-inner.vertical > .next.left,
.carousel-inner.vertical > .prev.right {
top: 0;
}
.carousel-inner.vertical > .active.left {
left: 0;
top: -100%;
}
.carousel-inner.vertical > .active.right {
left: 0;
top: 100%;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div style="width:600px"> <!-- wrap @img width -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="3000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner vertical" role="listbox">
<div class="item active">
<img src="http://placehold.it/600x400&text=First+Slide" alt="First Slide">
<div class="carousel-caption">
First Slide
</div>
</div>
<div class="item">
<img src="http://placehold.it/600x400&text=Second+Slide" alt="Second Slide">
<div class="carousel-caption">
Second Slide
</div>
</div>
<div class="item">
<img src="http://placehold.it/600x400&text=Third+Slide" alt="Third Slide">
<div class="carousel-caption">
Third Slide
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>注意：将vertical类添加到您的carousel-inner，或根据您的喜好编辑CSS。