是否可以在 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中的所有内容更改left为top.
这至少表明你需要做什么才能让它垂直滑动。但是，在实践中，确实应该向carousel.lessup添加和down类，并向bootstrap-carousel.js添加一个新选项以在它们之间切换。
与最新（当前）版本的 Bootstrap（v3.3.4）一起使用时，先前答案中提供的解决方案在某些流行的浏览器（如 Google Chrome）上无法正常工作。
如果有人需要与 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。