"Fade Quote Carousel"
Bootstrap 3.3.0 Snippet by escapedlion

Post to Facebook Tweet this

<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 ----------> <head> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"> </head> <div class="container"> <section style="padding: 25px;"> <div class="row"> <div class="col-md-6"> <div id="private_label_gallery" class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"> Private Label Gallery 006 </h3> <div class="pull-right" style="margin-top: -18px;"> <span id="carousel-index"> </span> </div> </div> <div class="panel-body" style="padding:0px;"> <div id="private_label_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> <li data-target="#carousel" data-slide-to="3"></li> <li data-target="#carousel" data-slide-to="4"></li> <li data-target="#carousel" data-slide-to="5"></li> </ol> <div class="carousel-inner"> <div class="item active"> <img class="img-responsive" src="http://lorempixel.com/640/320/abstract/1/"> <div class="carousel-caption"> <span class="itemName">1</span> </div> </div> <div class="item"> <img class="img-responsive" src="http://api.thumbnail.ws/api/abb31c1840095e99d9472149eaf1f96537013f8543cd/thumbnail/get?url=http://rhythminthenight.tix.com/&width=640"> <div class="carousel-caption"> <span class="itemName">rhythminthenight</span> </div> </div> <div class="item"> <img class="img-responsive lazy" src="http://api.thumbnail.ws/api/abb31c1840095e99d9472149eaf1f96537013f8543cd/thumbnail/get?url=http://riversiderep.tix.com/&width=640"> <div class="carousel-caption"> <span class="itemName">riversiderep</span> </div> </div> <div class="item"> <img class="img-responsive lazy" src="http://api.thumbnail.ws/api/abb31c1840095e99d9472149eaf1f96537013f8543cd/thumbnail/get?url=http://thriveentertainment.tix.com/&width=640"> <div class="carousel-caption"> <span class="itemName">thriveentertainment</span> </div> </div> <div class="item "> <img class="img-responsive lazy" src="http://api.thumbnail.ws/api/abb31c1840095e99d9472149eaf1f96537013f8543cd/thumbnail/get?url=http://gplb.tix.com/&width=640"> <div class="carousel-caption"> <span class="itemName">gplb</span> </div> </div> <div class="item"> <img class="img-responsive lazy" src="http://api.thumbnail.ws/api/abb31c1840095e99d9472149eaf1f96537013f8543cd/thumbnail/get?url=http://chicosangels.tix.com/&width=640"> <div class="carousel-caption"> <span class="itemName">chicosangels</span> </div> </div> </div> </div> </div> <div class="panel-footer "> <div class="btn-group btn-group-justified carousel-controls"> <div class="btn-group"> <a id="btnPrev" class="btn btn-default" href="#private_label_carousel" data-slide="prev"> <span class="fa fa-chevron-left"></span> <span class="nav-label"> Previous</span> </a> </div> <div class="btn-group"> <button id="btnLaunch"" class="btn btn-default" role="button"> <span class="fa fa-rocket"></span> <span class="nav-label"> Launch</span> </button> </div> <div class="btn-group"> <button id="btnEmail" class="btn btn-default" role="button"> <span class="fa fa-envelope"></span> <span class="nav-label"> Email</span> </button> </div> <div class="btn-group"> <a id="btnNext" class="btn btn-default" href="#private_label_carousel" data-slide="next"> <span class="nav-label">Next </span> <span class="fa fa-chevron-right" ></span> </a> </div> </div> </div> </div> </div> </div> </section> </div>
/*-------------------------------*/ /* Code snippet by */ /* @maridlcrmn */ /*-------------------------------*/ section { padding-top: 100px; padding-bottom: 100px; } .quote { color: rgba(0,0,0,.1); text-align: center; margin-bottom: 30px; } /*-------------------------------*/ /* Carousel Fade Transition */ /*-------------------------------*/ #fade-quote-carousel.carousel { padding-bottom: 60px; } #private_label_carousel.carousel .carousel-inner .item { opacity: 0; -webkit-transition-property: opacity; -ms-transition-property: opacity; transition-property: opacity; } #private_label_carousel.carousel .carousel-inner .active { opacity: 1; -webkit-transition-property: opacity; -ms-transition-property: opacity; transition-property: opacity; } #private_label_carousel.carousel .carousel-indicators { bottom: 10px; } #private_label_carousel.carousel .carousel-indicators > li { background-color: #e84a64; border: none; } #private_label_carousel blockquote { text-align: center; border: none; } #private_label_carousel .profile-circle { width: 100px; height: 100px; margin: 0 auto; border-radius: 100px; }

Related: See More

Vue Argon Design System
Bootstrap 4 Carousel
Carousel with Search
Bootstrap 4 Blog Carousel

Questions / Comments: