Twitter Bootstrap 轮播垂直滑动 [英] Twitter Bootstrap carousel vertical sliding

问题描述

是否可以在 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 并向 bootstrap-carousel.js 在它们之间切换.

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屋！