Twitter Bootstrap垂直滑動

Question

是否可以實現垂直旋轉木馬滑動widh 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 

我試圖改變方向「向上」和「向下」，但滑動不靈。

Answer 1

是的。

下面是一個很好的方式來做到這一點，它通過簡單覆蓋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。

JSFiddle

---

這至少表明你需要做的就是它上下滑動什麼。然而，在實踐中，真的應該添加up和down類到carousel.less，並添加一個新選項到bootstrap-carousel.js在它們之間切換。

Answer 2

嘗試這個插件 https://github.com/tutorialdrive/Bootstrap-Vertical-Thumbnail-Carousel

看一看在這裏。

Twitter Bootstrap Vertical Thumbnail Carousel

Answer 3

在以前的答案提供的解決方案不與引導（v3.3.4）的最新（當前）版本中使用一些流行的瀏覽器（如谷歌瀏覽器）正常工作。

如果有人需要一個更新的解決方案，以引導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，只要你喜歡。