jquery - 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

---

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