<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/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="col-md-12 col-md-12 p_rm">
<div id="carousel-main" class="carousel slide " data-ride="carousel" data-interval="5000">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<h1 class="text-center">Deep tissue</h1>
<p class="text-center font-blue">Massage</p>
<img src="https://images.unsplash.com/photo-1445462657202-a0893228a1e1?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1200" class="img-responsive">
<p class="">one</p>
</div>
<div class="item">
<h1 class="text-center">Lymphatic</h1>
<p class="text-center font-blue">Massage</p>
<img src="https://images.unsplash.com/photo-1445280471656-618bf9abcfe0?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1200" class="img-responsive">
<p class="">two</p>
</div>
<div class="item">
<h1 class="text-center">Oriental</h1>
<p class="text-center font-blue">Massage</p>
<img src="https://images.unsplash.com/photo-1419064642531-e575728395f2?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1200" class="img-responsive">
<p class="">three</p>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control custom_mass_left_car" href=".carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
<!--<img src="images/arrow_left_mass.png"/>-->
</a>
<a class="right1 carousel-control custom_mass_right_car" href=".carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
<!--<img src="images/arrow_right_mass.png"/>-->
</a>
</div>
</div>
.carousel-inner.vertical {
height: 100%; /*Note: set specific height here if not, there will be some issues with IE browser*/
}
.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.vertiacal > .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 {
-webkit-transform: translate3d(0, 33.33%, 0);
transform: translate3d(0, 33.33%, 0);
top: 0;
}
.carousel-inner.vertical > .item.prev,
.carousel-inner.vertical > .item.active.left {
-webkit-transform: translate3d(0, -33.33%, 0);
transform: translate3d(0, -33.33%, 0);
top: 0;
}
.carousel-inner.vertical > .item.next.left,
.carousel-inner.vertical > .item.prev.right,
.carousel-inner.vertical > .item.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
top: 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: 33.33%;
right:0;
}
.carousel-inner.vertical > .prev {
left: 0;
top: -33.33%;
right:0;
}
.carousel-inner.vertical > .next.left,
.carousel-inner.vertical > .prev.right {
top: 0;
}
.carousel-inner.vertical > .active.left {
left: 0;
top: -33.33%;
right:0;
}
.carousel-inner.vertical > .active.right {
left: 0;
top: 33.33%;
right:0;
}
#carousel-pager .carousel-control.left {
bottom: initial;
width: 100%;
}
#carousel-pager .carousel-control.right {
top: initial;
width: 100%;
}
.carousel-inner h1
{
text-transform: uppercase;
margin: 0px;
font-size: 23px;
font-weight: bold;
}
.custom_mass_right_car
{
/*float: right;
top: -324px;
position: relative;
right: -228px;
left: 0; */
background-image: none !important;
opacity: 9;
right: 53px !important;
}
.custom_mass_left_car
{
background-image: none !important;
opacity: 9;
left: 55px;
}
.custom_mass_left_car img
{
width: 32px;
}
.custom_mass_right_car img
{
width: 32px;
}
.custom_mass_right_car.carousel-control.right1 {
right: 0;
left: auto;
background-image: -webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
background-image: -o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));
background-image: linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
background-repeat: repeat-x;
}
/* premium */
$('.carousel .vertical .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=1;i<2;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
