Twitter Bootstrap carousel vertical sliding

carousel, jquery, sliding, twitter-bootstrap

Solution

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.

Problem

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.

Original source

Related problems