<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 ---------->
<div class="container">
<div class="row">
<div class="carousel zoom landscape slide" id="carousel-landscape" data-ride="carousel" data-interval=0>
<ol class="carousel-indicators">
<li data-target="#carousel-landscape" data-slide-to="0" class="active"></li>
<li data-target="#carousel-landscape" data-slide-to="1" class=""></li>
<li data-target="#carousel-landscape" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img alt="" src="https://dummyimage.com/340x225/666666/ffffff">
</div>
<div class="item">
<img alt="" src="https://dummyimage.com/340x225/666666/ffffff">
</div>
<div class="item">
<img alt="" src="https://dummyimage.com/340x225/666666/ffffff">
</div>
</div>
<a href="#carousel-landscape" class="left carousel-control" role="button" data-slide="prev"><span class="sr-only">Previous</span> </a>
<a href="#carousel-landscape" class="right carousel-control" role="button" data-slide="next"><span class="sr-only">Next</span> </a>
</div>
</div>
<div>
<div class="carousel zoom portrait slide" id="carousel-portrait" data-ride="carousel" data-interval=0>
<ol class="carousel-indicators">
<li data-target="#carousel-portrait" data-slide-to="0" class="active"></li>
<li data-target="#carousel-portrait" data-slide-to="1" class=""></li>
<li data-target="#carousel-portrait" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img alt="" src="https://dummyimage.com/220x340/666666/ffffff">
</div>
<div class="item">
<img alt="" src="https://dummyimage.com/220x340/666666/ffffff">
</div>
<div class="item">
<img alt="" src="https://dummyimage.com/220x340/666666/ffffff">
</div>
</div>
<a href="#carousel-portrait" class="left carousel-control" role="button" data-slide="prev"><span class="sr-only">Previous</span> </a>
<a href="#carousel-portrait" class="right carousel-control" role="button" data-slide="next"><span class="sr-only">Next</span> </a>
</div>
</div>
</div>
/* carousel.zoom */
.carousel.zoom{
overflow: hidden;
display: inline-block;
}
.carousel.zoom .carousel-inner{
position: relative;
overflow: visible;
}
.carousel.zoom .carousel-inner>.item{
position: absolute;
display: block;
width: 100%;
opacity: 0;
z-index: 0;
transition: all .4s ease-in-out;
}
.carousel.zoom .carousel-inner>.item.active{
position: relative;
opacity: 1;
z-index: 1;
}
.carousel.zoom .carousel-inner>.item.active.right,
.carousel.zoom .carousel-inner>.item.next {
-webkit-transform-origin: center right;
-moz-transform-origin: center right;
-ms-transform-origin: center right;
-o-transform-origin: center right;
transform-origin: center right;
opacity: 0.3;
}
.carousel.zoom .carousel-inner>.item.active.left,
.carousel.zoom .carousel-inner>.item.prev {
-webkit-transform-origin: center left;
-moz-transform-origin: center left;
-ms-transform-origin: center left;
-o-transform-origin: center left;
transform-origin: center left;
opacity: 0.3;
}
/* carousel.zoom.landscape */
.carousel.zoom.landscape .carousel-inner{
margin: 0 15px;
width: auto;
}
.carousel.zoom.landscape .carousel-inner>.item.active.right,
.carousel.zoom.landscape .carousel-inner>.item.next {
-webkit-transform: translate3d(15px,0,0) scale(0.8);
-moz-transform: translate3d(15px,0,0) scale(0.8);
-ms-transform : translate3d(15px,0,0) scale(0.8);
-o-transform : translate3d(15px,0,0) scale(0.8);
transform: translate3d(15px,0,0) scale(0.8);
}
.carousel.zoom.landscape .carousel-inner>.item.active.left,
.carousel.zoom.landscape .carousel-inner>.item.prev {
-webkit-transform: translate3d(-15px,0,0) scale(0.8);
-moz-transform: translate3d(-15px,0,0) scale(0.8);
-ms-transform : translate3d(-15px,0,0) scale(0.8);
-o-transform : translate3d(-15px,0,0) scale(0.8);
transform: translate3d(-15px,0,0) scale(0.8);
}
.carousel.zoom.landscape .carousel-control{
width: 15px;
background: transparent;
}
/* carousel.zoom.portrait */
.carousel.zoom.portrait .carousel-inner{
margin: 0 50px;
width: auto;
}
.carousel.zoom.portrait .carousel-inner>.item.active.right,
.carousel.zoom.portrait .carousel-inner>.item.next {
-webkit-transform: translate3d(50px,0,0) scale(0.8);
-moz-transform: translate3d(50px,0,0) scale(0.8);
-ms-transform : translate3d(50px,0,0) scale(0.8);
-o-transform : translate3d(50px,0,0) scale(0.8);
transform: translate3d(50px,0,0) scale(0.8);
}
.carousel.zoom.portrait .carousel-inner>.item.active.left,
.carousel.zoom.portrait .carousel-inner>.item.prev {
-webkit-transform: translate3d(-50px,0,0) scale(0.8);
-moz-transform: translate3d(-50px,0,0) scale(0.8);
-ms-transform : translate3d(-50px,0,0) scale(0.8);
-o-transform : translate3d(-50px,0,0) scale(0.8);
transform: translate3d(-50px,0,0) scale(0.8);
}
.carousel.zoom.portrait .carousel-control{
width: 50px;
background: transparent;
}
$(".carousel.zoom").carousel().on("slide.bs.carousel", function (data) {
var n = $(data.target).find(".item").length;
var active = data.relatedTarget;
if(active===undefined){
active = $(data.target).find(".item.active");
}else{
active = $(data.relatedTarget);
}
console.log(active);
$(data.target).find(".item.next").removeClass("next");
var next = $(data.target).find(".item").eq(active.index()-n+1);
next.addClass("next");
$(data.target).find(".item.prev").removeClass("prev");
var prev = $(data.target).find(".item").eq(active.index()-1);
prev.addClass("prev");
}).trigger("slide.bs.carousel");
