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

是的。

下面是一种巧妙的方法，只需覆盖 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 添加一个新选项 在它们之间切换。