web-dev-qa-db-ja.com

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

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

方向を「上」と「下」に変えようとしましたが、スライドは機能しませんでした。

jquerytwitter-bootstrapcarouselsliding
21
Qwadrat

はい。

以下はそれを行うためのハックな方法で、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の新しいオプションを使用して、それらを切り替えます。

42
merv

このプラグインを試してくださいhttps://github.com/tutorialdrive/Bootstrap-Vertical-Thumbnail-Carousel

そして、こちらをご覧ください。

Twitter Bootstrap垂直サムネイルカルーセル

0
Shivam Pandya