<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="box">
<div id="myCarousel" class="carousel vertical slide">
<div class="slider_button">
<span class="up_slide">
<i class="fa fa-angle-up slide_arrow" data-slide="next" aria-hidden="true"></i>
</span>
<span class="down_slide">
<i class="fa fa-angle-down slide_arrow" data-slide="prev" aria-hidden="true"></i>
</span>
</div>
<div class="carousel-inner">
<div class="item active">
<div class="rate">
<span class="cat_name">Economy</span>
<div class="inr">
Rs.49
<span>(Per Hour)</span>
</div>
<div id="stars" class="starrr"></div>
</div>
</div>
<div class="item">
<div class="rate">
<span class="cat_name">Economy2</span>
<div class="inr">
Rs.49
<span>(Per Hour)</span>
</div>
<div id="stars" class="starrr"></div>
</div>
</div>
<div class="item">
<div class="rate">
<span class="cat_name">Economy3</span>
<div class="inr">
Rs.49
<span>(Per Hour)</span>
</div>
<div id="stars" class="starrr"></div>
</div>
</div>
</div>
</div>
</div>
.box{box-shadow:0 0 3px #aaa; width:25%; height:150px; margin:30px auto; background:#ececec;}
.inr{ font-size:35px;
padding: 0;
width:100%;
border-bottom:1px solid rgba(0,0,0,0.3);}
.inr span{
text-align: left;
font-size: 14px;
}
.rate .cat_name{font-size:40px; width:100%; text-align:center; float:left;}
#myCarousel{position:relative;}
.slider_button{position:absolute; right:-40px; top:20%; background:#fff; text-align:center; }
.slider_button .up_slide{width:100%; text-align:center; float:left; font-size:20px;box-shadow:0 2px 2px rgba(0,0,0,0.5),2px 0 2px rgba(0,0,0,0.5); margin:10px 0;}
.slider_button .down_slide{width:100%; text-align:center; float:left; font-size:20px;box-shadow:0 2px 2px rgba(0,0,0,0.5),2px 0 2px rgba(0,0,0,0.5); margin:10px 0;}
.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: 400px;
}
.carousel.vertical .prev {
top: -400px;
}
.carousel.vertical .next.left,
.carousel.vertical .prev.right {
top: 0;
}
.carousel.vertical .active.left {
top: -400px;
}
.carousel.vertical .active.right {
top: 400px;
}
.carousel.vertical .item {
left: 0;
}
$(document).ready(function () {
$('.slide_arrow').on('click', function () {
if ($(this).attr('data-slide') == 'next') {
$('#myCarousel').carousel('next');
}
if ($(this).attr('data-slide') == 'prev') {
$('#myCarousel').carousel('prev')
}
});
$('.carousel').carousel({
interval: 3000
});
});
