Twitter Bootstrap carousel vertical sliding

问题

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.

回答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.

回答2:

The solutions provided in the previous answers do not work properly on some popular browsers (like Google Chrome) when used with the latest (current) version of Bootstrap (v3.3.4).

In case anyone needs an updated solution that works with Bootstrap v3.3.4, here it is --

.carousel-inner.vertical {
  height: 100%;
}
.carousel-inner.vertical > .item {
  -webkit-transition: .6s ease-in-out top;
  -o-transition: .6s ease-in-out top;
  transition: .6s ease-in-out top;
}
@media all and (transform-3d),
(-webkit-transform-3d) {
  .carousel-inner.vertical > .item {
    -webkit-transition: -webkit-transform .6s ease-in-out;
    -o-transition: -o-transform .6s ease-in-out;
    transition: transform .6s ease-in-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
  }
  .carousel-inner.vertical > .item.next,
  .carousel-inner.vertical > .item.active.right {
    top: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  .carousel-inner.vertical > .item.prev,
  .carousel-inner.vertical > .item.active.left {
    top: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  .carousel-inner.vertical > .item.next.left,
  .carousel-inner.vertical > .item.prev.right,
  .carousel-inner.vertical > .item.active {
    top: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.carousel-inner.vertical > .active {
  top: 0;
}
.carousel-inner.vertical > .next,
.carousel-inner.vertical > .prev {
  top: 0;
  height: 100%;
  width: auto;
}
.carousel-inner.vertical > .next {
  left: 0;
  top: 100%;
}
.carousel-inner.vertical > .prev {
  left: 0;
  top: -100%
}
.carousel-inner.vertical > .next.left,
.carousel-inner.vertical > .prev.right {
  top: 0;
}
.carousel-inner.vertical > .active.left {
  left: 0;
  top: -100%;
}
.carousel-inner.vertical > .active.right {
  left: 0;
  top: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div style="width:600px"> <!-- wrap @img width -->
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="3000">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner vertical" role="listbox">
      <div class="item active">
        <img src="http://placehold.it/600x400&text=First+Slide" alt="First Slide">
        <div class="carousel-caption">
          First Slide
        </div>
      </div>
      <div class="item">
        <img src="http://placehold.it/600x400&text=Second+Slide" alt="Second Slide">
        <div class="carousel-caption">
          Second Slide
        </div>
      </div>
      <div class="item">
        <img src="http://placehold.it/600x400&text=Third+Slide" alt="Third Slide">
        <div class="carousel-caption">
          Third Slide
        </div>
      </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

Note: add the vertical class to your carousel-inner, or edit the CSS as you like.