<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<h3 class="text-success">A demo of vertical carousel in BS4</h3>
<div class="container">
<div id="bs4-vertical-slide-carousel" class="carousel bs-vertical-slider slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#bs4-vertical-slide-carousel" data-slide-to="0" class="active"></li>
<li data-target="#bs4-vertical-slide-carousel" data-slide-to="1"></li>
<li data-target="#bs4-vertical-slide-carousel" data-slide-to="2"></li>
<li data-target="#bs4-vertical-slide-carousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block mx-auto img-fluid" src="https://www.jquery-az.com/bootstrap4/images/BS-slide-1.jpeg"
alt="Slide Number 1">
</div>
<div class="carousel-item">
<img class="d-block mx-auto img-fluid" src="https://www.jquery-az.com/bootstrap4/images/BS-slide-4.jpeg"
alt="Slide Number 2">
</div>
<div class="carousel-item">
<img class="d-block mx-auto img-fluid" src="https://www.jquery-az.com/bootstrap4/images/BS-slide-3.jpeg"
alt="Slide Number 3">
</div>
<div class="carousel-item">
<img class="d-block mx-auto img-fluid" src="https://www.jquery-az.com/bootstrap4/images/BS-slide-4.jpeg"
alt="Slide Number 4">
<!--Captions for the slides go here -->
<div class="carousel-caption text-danger d-none d-sm-block">
<h5>Vertical Carousel Demo</h5>
<p class="text-light">Slides moving vertically rather default horizontal
<button class="btn btn-outline-info btn-lg">More info</button>
</p>
</div>
<!--Captions ending here for slide 3-->
</div>
</div>
</div>
<div class="text-center mt-4">
<!-- <button class="btn btn-success" id="btnPrev">Prev</button>
<button class="btn btn-danger" id="btnPause">Pause</button>
<button class="btn btn-success" id="btnNext">Next</button> -->
<button class="carousel-buttons">
<a data-target="#bs4-vertical-slide-carousel" data-slide-to="0" href="#">
<div class="img-circle active center-block">
<img class="carousel-icons-img" src="https://cdn4.iconfinder.com/data/icons/small-n-flat/24/user-48.png" />
</div>
</a>
</button>
<button class="carousel-buttons">
<a data-target="#bs4-vertical-slide-carousel" data-slide-to="1" href="#">
<div class="img-circle center-block">
<img class="carousel-icons-img" src="https://cdn4.iconfinder.com/data/icons/small-n-flat/24/user-48.png" />
</div>
</a>
</button>
<button class="carousel-buttons">
<a data-target="#bs4-vertical-slide-carousel" data-slide-to="2" href="#">
<div class="img-circle center-block">
<img class="carousel-icons-img" src="https://cdn4.iconfinder.com/data/icons/small-n-flat/24/user-48.png" />
</div>
</a>
</button>
<button class="carousel-buttons">
<a data-target="#bs4-vertical-slide-carousel" data-slide-to="3" href="#">
<div class="img-circle center-block">
<img class="carousel-icons-img" src="https://cdn4.iconfinder.com/data/icons/small-n-flat/24/user-48.png" />
</div>
</a>
</button>
</div>
</div>
.bs-vertical-slider .carousel-item-next.carousel-item-left,
.bs-vertical-slider .carousel-item-prev.carousel-item-right {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.bs-vertical-slider .carousel-item-next,
.bs-vertical-slider .active.carousel-item-right {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100% 0);
}
.bs-vertical-slider .carousel-item-prev,
.bs-vertical-slider .active.carousel-item-left {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
.item img {
width: 100%;
}
.col-sm-4 {
background-color: #ccc;
}
.img-circle {
height: 48px;
width: 48px;
border-radius: 50%;
background-color: #0000ff;
box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.img-circle.active {
background-color: #ffff99;
}
$('#bs4-vertical-slide-carousel').carousel({
interval: 4000
})
$('#btnPrev').on('click', function () {
$('#bs4-vertical-slide-carousel').carousel(0);
})
$('#btnPause').on('click', function () {
$('#bs4-vertical-slide-carousel').carousel('pause');
})
$('#btnNext').on('click', function () {
$('#bs4-vertical-slide-carousel').carousel(2);
})
$('#bs4-vertical-slide-carousel').on('slid.bs.carousel', function (event) {
var nextactiveslide = $(event.relatedTarget).index();
var $btns = $('.carousel-buttons');
var $active = $btns.find("[data-slide-to='" + nextactiveslide + "']");
$btns.find('.img-circle').removeClass('active');
$active.find('.img-circle').addClass('active');
});
