<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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"> <section id="wrapper"> <div class="row"> <div class="col-md-6"> <div id="private_label" class="panel panel-default" class="carousel slide" data-ride="carousel"> <div class="panel-heading"> <h3 class="panel-title"> Single Thumbnail </h3> </div> <div class="panel-body" style="padding: 0px;"> <div class="carousel-inner"> <ol class="carousel-indicators"> <li data-target="#private_label" data-slide-to="0" class="active"></li> <li data-target="#private_label" data-slide-to="1"></li> <li data-target="#private_label" data-slide-to="2"></li> <li data-target="#private_label" data-slide-to="3"></li> <li data-target="#private_label" data-slide-to="4"></li> <li data-target="#private_label" data-slide-to="5"></li> <li data-target="#private_label" data-slide-to="6"></li> <li data-target="#private_label" data-slide-to="7"></li> </ol> <div class="item active"> <img src="http://placehold.it/500x400/1dd2af" alt="1 slide"> <div class="carousel-caption"> <h3>TURQUOISE</h3> </div> </div> <div class="item"> <img src="http://placehold.it/500x400/40d47e" alt="2 slide"> <div class="carousel-caption"> <h3>EMERALD </h3> </div> </div> <div class="item"> <img src="http://placehold.it/500x400/19b698" alt="3 slide"> <div class="carousel-caption"> <h3>GREEN SEA</h3> </div> </div> <div class="item"> <img src="http://placehold.it/500x400/2cc36b" alt="4 slide"> <div class="carousel-caption"> <h3>NEPHRITIS</h3> </div> </div> <div class="item"> <img src="http://placehold.it/500x400/4aa3df" alt="5 slide"> <div class="carousel-caption"> <h3>PETER RIVER </h3> </div> </div> <div class="item"> <img src="http://placehold.it/500x400/#2e8ece" alt="6 slide"> <div class="carousel-caption"> <h3>BELIZE HOLE </h3> </div> </div> <div class="item"> <img src="http://placehold.it/500x400/a66bbe" alt="7 slide"> <div class="carousel-caption"> <h3>AMETHYST </h3> </div> </div> <div class="item"> <img src="http://placehold.it/500x400/9b50ba" alt="8 slide"> <div class="carousel-caption"> <h3>WISTERIA </h3> </div> </div> </div> </div> <div class="panel-footer"> <ul class="nav nav-pills nav-justified"> <li> <a href="#private_label" data-slide="prev" style="background-image:none;"> <span class="glyphicon glyphicon-chevron-left"></span> Previous </a> </li> <li> <a href="#"> <span class="fa fa-rocket"></span> Launch </a> </li> <li> <a href="#"> <span class="fa fa-envelope"></span> Email </a> </li> <li> <a href="#private_label" data-slide="next" style="background-image:none;"> Next <span class="glyphicon glyphicon-chevron-right"></span> </a> </li> </ul> </div> </div> </div> <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"> Multiple Thumbnails </h3> </div> <div class="panel-body" style="padding: 5px;"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> <li data-target="#carousel-example-generic" data-slide-to="3"></li> <li data-target="#carousel-example-generic" data-slide-to="4"></li> <li data-target="#carousel-example-generic" data-slide-to="5"></li> <li data-target="#carousel-example-generic" data-slide-to="6"></li> <li data-target="#carousel-example-generic" data-slide-to="7"></li> </ol> <div class="carousel-inner"> <div class="item active"> <img src="http://placehold.it/500x400/1dd2af" alt="1 slide"> <div class="carousel-caption"> <h3>TURQUOISE</h3> </div> </div> <div class="item"> <img src="http://placehold.it/500x400/40d47e" alt="2 slide"> <div class="carousel-caption"> <h3>EMERALD </h3> </div> </div> <div class="item"> <img src="http://placehold.it/500x400/19b698" alt="3 slide"> <div class="carousel-caption"> <h3>GREEN SEA</h3> </div> </div> <div class="item"> <img src="http://placehold.it/500x400/2cc36b" alt="4 slide"> <div class="carousel-caption"> <h3>NEPHRITIS</h3> </div> </div> <div class="item"> <img src="http://placehold.it/500x400/4aa3df" alt="5 slide"> <div class="carousel-caption"> <h3>PETER RIVER </h3> </div> </div> <div class="item"> <img src="http://placehold.it/500x400/#2e8ece" alt="6 slide"> <div class="carousel-caption"> <h3>BELIZE HOLE </h3> </div> </div> <div class="item"> <img src="http://placehold.it/500x400/a66bbe" alt="7 slide"> <div class="carousel-caption"> <h3>AMETHYST </h3> </div> </div> <div class="item"> <img src="http://placehold.it/500x400/9b50ba" alt="8 slide"> <div class="carousel-caption"> <h3>WISTERIA </h3> </div> </div> </div> </div> </div> <div class="panel-footer "> <div class="btn-group btn-group-justified" role="toolbar"> <div class="btn-group"> <button id="moveBack" href="#private-label-carousel" class="btn btn-default" data-slide="prev"> <span class="fa fa-chevron-left"></span> <span class="nav-label"> Previous</span> </button> </div> <div class="btn-group"> <button id="launchWebsite" 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="emailWebsite" class="btn btn-default" role="button"> <span class="fa fa-envelope"></span> <span class="nav-label"> Email</span> </button> </div> <div class="btn-group"> <button id="moveForward" href="#private-label-carousel" class="btn btn-default" data-slide="next"> <span class="nav-label">Next </span> <span class="fa fa-chevron-right" ></span> </button> </div> </div> </div> </div> </div> </div> </section> </div>

.panel {margin-top: 25px;} #moveBack { color: #ecf0f1; border-right: .5px solid #ecf0f1; } #launchWebsite { color: #ecf0f1; border-right: .25px solid #ecf0f1; } #emailWebsite { color: #ecf0f1; } #moveForward { color: #ecf0f1; border-left: .5px solid #ecf0f1; }

$("#toggle-chevron").click(function () { if ($('#side-outer > #fullwidth').is(":visible") === true) { $("#side-outer").toggleClass("active"); $("#toggle-chevron").toggleClass("active"); $("#toggle-chevron").toggleClass("fa-chevron-right"); } else { $("#side-outer").toggleClass("active"); $("#toggle-chevron").toggleClass("active"); $("#toggle-chevron").toggleClass("fa-chevron-left"); } }); $("#shortwidth").hide(); $('#toggle-bars').click(function () { if ($('#side-inner > #shortwidth').is(":visible") === true) { $("#shortwidth").animate({width: "hide"}, 1500, "easeOutBounce"); $("#toggle-bars").toggleClass("active"); } else { $("#shortwidth").animate({width: "show"}, 1500, "easeOutBounce"); $("#toggle-bars").toggleClass("active"); } });