"Fade to Zoom Carousel"
Bootstrap 3.3.0 Snippet by ashutosh123

<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 id="carousel" class="carousel slide carousel-fade" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel" data-slide-to="0" class="active"></li> <li data-target="#carousel" data-slide-to="1"></li> <li data-target="#carousel" data-slide-to="2"></li> </ol> <!-- Carousel items --> <div class="carousel-inner carousel-zoom"> <div class="active item"><img class="img-responsive" 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"> <div class="carousel-caption"> <h2>Title</h2> <p>Description</p> </div> </div> <div class="item"><img class="img-responsive" 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"> <div class="carousel-caption"> <h2>Title</h2> <p>Description</p> </div> </div> <div class="item"><img class="img-responsive" 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"> <div class="carousel-caption"> <h2>Title</h2> <p>Description</p> </div> </div> </div> <!-- Carousel nav --> <a class="carousel-control left" href="#carousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#carousel" data-slide="next">›</a> </div> </div>
/* inspired from http://codepen.io/Rowno/pen/Afykb & https://jsfiddle.net/q0rgL8ws/ */ .carousel-fade .carousel-inner .item { opacity: 0; transition-property: opacity; overflow:hidden; } .item.active img { transition: transform 5000ms linear 0s; /* This should be based on your carousel setting. For bs, it should be 5second*/ transform: scale(1.05, 1.05); } .carousel-fade .carousel-inner .active { opacity: 1; } .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { left: 0; opacity: 0; z-index: 1; } .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1; } .carousel-fade .carousel-control { z-index: 2; } /* WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers." now override the 3.3 new styles for modern browsers & apply opacity */ @media all and (transform-3d), (-webkit-transform-3d) { .carousel-fade .carousel-inner > .item.next, .carousel-fade .carousel-inner > .item.active.right { opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .carousel-fade .carousel-inner > .item.prev, .carousel-fade .carousel-inner > .item.active.left { opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .carousel-fade .carousel-inner > .item.next.left, .carousel-fade .carousel-inner > .item.prev.right, .carousel-fade .carousel-inner > .item.active { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }

Related: See More


Questions / Comments: