Vertical Sliding for Bootstrap Carousel

It is reasonable to think that Bootstrap would give a very simple and straight forward solution to change the direction of its carousel slides from top to bottom, right to left and vice versa but it’s not as easy as I first expected. Apparently, Bootstrap Carousel doesn’t have an intrinsic solution to control the direction of slides so we have to dig dipper in the code.

Fortunately for vertical sliding, there is a relatively simple solution and thanks to the developers around the internet I found this snippet that works great and does what I needed to do:

.vert .carousel-item-next.carousel-item-left,
.vert .carousel-item-prev.carousel-item-right {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.vert .carousel-item-next,
.vert .active.carousel-item-right {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100% 0);
}

.vert .carousel-item-prev,
.vert .active.carousel-item-left {
-webkit-transform: translate3d(0,-100%, 0);
        transform: translate3d(0,-100%, 0);
}

Just remember that we need to add the “vert” class to the main container of the carousel like this:

  <div id="myCarousel" class="carousel vert slide" data-ride="carousel">

Leave a Reply

Your email address will not be published. Required fields are marked *