Vertical Carousel (Bootstrap 4 and Bootstrap 3 With jQuery)

If you are working on a website, you can easily configure horizontal bootstrap carousel but in this article, I am going to provide you sample code to create vertical carousel in bootstrap 4 with output and vertical carousel in bootstrap 3 with output, you can also create veritcal carousel using jQuery, we will see that method also.

Vertical Carousel using Bootstrap 4

In this method, we will be using Bootstrap 4 to show Carousel, once we have carousel, we will with the help of CSS animation, show slide to perform vertically instead of horizontally.

HTML code

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="container">
    <div id="carouselExample" class="carousel vert slide" data-ride="carousel" data-interval="1000">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block mx-auto img-fluid" src="https://placehold.it/600x400&text=First+Slide" alt="First slide">
            </div>
            <div class="carousel-item">
                <img class="d-block mx-auto img-fluid" src="https://placehold.it/600x400&text=Second+Slide" alt="Second slide">
            </div>
            <div class="carousel-item">
                <img class="d-block mx-auto img-fluid" src="https://placehold.it/600x400&text=Third+Slide" alt="Third slide">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon  rounded-circle" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
            <span class="carousel-control-next-icon  rounded-circle" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

CSS

.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);
}

Output:

Vertical Carousel using jQuery and Bootstrap 3

In this method, we will be using older version of Bootstrap, i.e, Bootstrap 3 and jQuery for using jQuery Carousel.

We will be using jQuery and Bootstrap 3 CDN links here, with basic HTML to create Carousel, here is the HTML code.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >

<!--jQuery and Bootstrap 3 CDN-->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>

<div class="container">
    
    <div class="row">
        <div id="myCarousel" class="carousel slide vertical">
            <!-- Carousel items -->
            <div class="carousel-inner">
                <div class="active item">
                    <img src="https://placehold.it/600x400&text=First+Slide">
                </div>
                <div class="item">
                    <img src="https://placehold.it/600x400&text=Second+Slide">
                </div>
                <div class="item">
                    <img src="https://placehold.it/600x400&text=Third+Slide">
                </div>
            </div>
            <!-- Carousel nav -->
            <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
        </div>
    </div>
</div>

jQuery code to initialize Carousel:

$('.carousel').carousel({
  interval: 3000
})

CSS code to change carousel from horizontal to 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;
}

.carousel-control{
  top:40% !important;
}
.carousel-control.right, .carousel-control.left{
  background-image: none !important
}

Output:

You may also like to read:

Select only Year in Bootstrap Datepicker

Showing Month and Year only in Bootstrap Datepicker