Twitter Bootstrap传送带垂直滑动 [英] Twitter Bootstrap carousel vertical sliding

问题描述

是否可以实现垂直轮播滑动widh Twitter Bootstrap? 在bootstrap.js中，我找到了

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

  , 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.

推荐答案

是.

下面是一种很简单的方法，只需覆盖CSS即可完成所有工作.

Yes.

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

如果在轮播中添加类vertical，则将以下CSS添加到页面将覆盖垂直滑动:

If you add a class vertical to your carousel, then adding the following CSS to the page will override the sliding to be 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.

This is basically taking everything in carousel.less and changing left to top.

这至少表明您需要做使其垂直滑动.但是，实际上，实际上应该将up和down类添加到 carousel.less ，然后将新选项添加​​到

This at least indicates what you need to do to get it to slide vertically. However, in practice, one really should add up and down classes to the carousel.less and add a new option to bootstrap-carousel.js to switch between them.

这篇关于Twitter Bootstrap传送带垂直滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！