Twitter Bootstrap carousel vertical sliding

Question

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.

Answer 1

Yes.

Below is a hacky way to do it, which does everything by simply overriding the 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;
}​

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

JSFiddle

---

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.