"Zoom Carousel "
Bootstrap 3.3.0 Snippet by erda19

<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> </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");

Related: See More


Questions / Comments: