jQuery Twitter Bootstrap 轮播垂直滑动

Twitter Bootstrap carousel vertical sliding

提问by Qwadrat

Is it possible to implement vertical carousel sliding widh Twitter Bootstrap? In bootstrap.js I find this

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

I tried to change direction to "up" and "down" but sliding not working.

我试图将方向更改为“向上”和“向下”，但滑动不起作用。

回答by merv

Yes.

是的。

Below is a hacky way to do it, which does everything by simply overriding the CSS.

下面是一种实现方法，它通过简单地覆盖 CSS 来完成所有操作。

If you add a class verticalto your carousel, then adding the following CSS to the page will override the sliding to be vertical:

如果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;
}?

This is basically taking everything in carousel.lessand changing leftto top.

这基本上是将carousel.less 中的所有内容更改left为top.

JSFiddle

JSFiddle

---

---

This at least indicates what you need to do to get it to slide vertically. However, in practice, one really should add upand downclasses to the carousel.lessand add a new option to bootstrap-carousel.jsto switch between them.

这至少表明您需要做什么才能使其垂直滑动。然而，在实践中，确实应该在carousel.less 中添加up和down类，并在bootstrap-carousel.js 中添加一个新选项以在它们之间切换。

回答by Hello Kitty

The solutions provided in the previous answers do not work properly on some popular browsers (like Google Chrome) when used with the latest (current) version of Bootstrap (v3.3.4).

与最新（当前）版本的 Bootstrap (v3.3.4) 一起使用时，先前答案中提供的解决方案在某些流行浏览器（如 Google Chrome）上无法正常工作。

In case anyone needs an updated solution that works with Bootstrap v3.3.4, here it is --

如果有人需要适用于 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>

Note: add the verticalclass to your carousel-inner, or edit the CSS as you like.

注意：将vertical类添加到您的carousel-inner，或根据需要编辑 CSS。

回答by Shivam Pandya

Try Out this Plugin https://github.com/tutorialdrive/Bootstrap-Vertical-Thumbnail-Carousel

试试这个插件 https://github.com/tutorialdrive/Bootstrap-Vertical-Thumbnail-Carousel

And take a look over here.

看看这里。

Twitter Bootstrap Vertical Thumbnail Carousel

Twitter Bootstrap 垂直缩略图轮播