22

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.

merv
  • 67,214
  • 13
  • 180
  • 245
Qwadrat
  • 223
  • 1
  • 2
  • 6

4 Answers4

44

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.

merv
  • 67,214
  • 13
  • 180
  • 245
  • 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. – Qwadrat Jul 23 '12 at 08:48
  • @Qwadrat which browser are you testing on? It was working for me, but I only tested in Chrome. – merv Jul 23 '12 at 12:35
  • In Chrome all is ok. In Firefox next frame moving over previous. In Opera next image moving with previous but stucks on second frame :) – Qwadrat Jul 24 '12 at 05:17
  • @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](http://jsfiddle.net/HHsxc/5/). Haven't tested this in Opera. – merv Jul 27 '12 at 19:52
  • 1
    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. – Jay Harris Jan 21 '13 at 13:59
28

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.

Hello Kitty
  • 381
  • 4
  • 5
  • Excellent Answer; worked perfect for new version & in Chrome; Thanks! – Catto Nov 04 '15 at 21:02
  • 1
    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. – Noobie3001 May 02 '16 at 14:38
  • Awesome solution. Any way to display more than 1 item at a time ? – djack109 Oct 02 '16 at 17:37
0

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

And take a look over here.

Twitter Bootstrap Vertical Thumbnail Carousel

Community
  • 1
  • 1
Shivam Pandya
  • 1,061
  • 3
  • 29
  • 64
0

try this codeply

Bootstrap 4 - vertical slider

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

teenage vampire
  • 339
  • 1
  • 5
  • 13