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.

Redintegrate

Don't think that is possible at least without modifying the code. – Broncho

This is easier now in Bootstrap 4: #42910576 – North

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.

Lavatory

Thank you for nice solution! But when we use standard behavior from right to left - we see both previous and next images moving to left. And when I tried to use your solution - only next image moving over previous. I tried to change various options in css but cant achieve this effect. – Redintegrate

@Redintegrate which browser are you testing on? It was working for me, but I only tested in Chrome. – Lavatory

In Chrome all is ok. In Firefox next frame moving over previous. In Opera next image moving with previous but stucks on second frame :) – Redintegrate

@Qwadrat, it looks like Firefox doesn't like the percent values for the top style. If you are using images of the same height, you can get away with defining it explicitly. See updated JSFiddle. Haven't tested this in Opera. – Lavatory

In what I have seen, Firefox doesn't like the height because none of the containers have a fixed height. If .carousel.vertical had a fixed height, it would work with percentages just fine. – Frenzy

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

Gilroy

Excellent Answer; worked perfect for new version & in Chrome; Thanks! – Superstitious

Having troubles on IE11. The new slide animates in OK, but the old slide stays static instead of leaving and it finally disappears once the new slide has completed the journey. Any ideas? Many thanks. – Regardant

Awesome solution. Any way to display more than 1 item at a time ? – Zoril

Answer 3

Try Out this Plugin https://github.com/tutorialdrive/Bootstrap-Vertical-Thumbnail-Carousel

And take a look over here.

Twitter Bootstrap Vertical Thumbnail Carousel

Snowfall

Answer 4

try this codeply

Bootstrap 4 - vertical slider

https://www.codeply.com/p/JxZ8htyOFN

Ankylosaur