Twitter Bootstrap 輪播垂直滑動

Question

是否可以在 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

是的。

下面是一個 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 。

JSFiddle

---

這至少表明你需要做什么才能讓它垂直滑動。 然而，在實踐中，確實應該向carousel.less添加up和down類，並向bootstrap-carousel.js添加一個新選項以在它們之間切換。

Answer 2

當與最新（當前）版本的 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。

Answer 3

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

看看這里。

Twitter Bootstrap 垂直縮略圖輪播

Answer 4

試試這個代碼

Bootstrap 4 - 垂直滑塊

https://www.codeply.com/p/JxZ8htyOFN