Twitter Bootstrapカルーセル垂直スライド

Question

垂直カルーセルスライドウィーを実装することは可能ですか？Twitter Bootstrap？私はこの

, 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 

を見つけるbootstrap.jsで は、私が「アップ」と「ダウン」が、動作していない摺動方向を変更しようとしました。

Answer 1

はい。

以下は、単純にCSSを上書きすることですべてを行う、ハックの方法です。

あなたは、そのページに次のCSSを追加すると、垂直にスライド上書きします、あなたのカルーセルにクラスverticalを追加する場合：

.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）の最新の（現在の）バージョンで使用（Google Chromeのような）いくつかの一般的なブラウザでは正常に動作しません。

誰でもブートストラップ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>

注：お使いのcarousel-innerにverticalクラスを追加、または編集あなたが好きなようにCSS。