<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 ----------> <!-- Todo: 1- make a mobile light weight version 2-add jquery options --> <div class="container"> <div class="row"> <p>Best viewed <a href="http://bootsnipp.com/iframe/NxzDp" target="_blank">full screen</a> </p> <div class="col-md-8"> <div class="bs-example"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Carousel indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Carousel items --> <div class="carousel-inner"> <div class="active item"> <img src="https://durian.blender.org/wp-content/uploads/2010/06/dragon-concept-art_008.jpg" class="img-responsive" alt=""> </div> <div class="item"> <img src="https://durian.blender.org/wp-content/uploads/2010/06/dragon-concept-art_010.jpg" class="img-responsive" alt=""> </div> <div class="item"> <img src="https://durian.blender.org/wp-content/uploads/2010/06/dragon-concept-art_004.jpg" class="img-responsive" alt="" > </div> </div> </div> <!-- Carousel nav --> <a class="carousel-control left" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="carousel-control right" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div> </div> </div> <p> <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fbootsnipp.com%2Fiframe%2FNxzDp" target="_blank"><small>HTML</small>⁵</a> <br> <br> </p>

/* ref: http://stackoverflow.com/questions/20746461/how-do-you-remove-the-default-bootstrap-3-carousel-control-background-gradients */ .carousel-control.left, .carousel-control.right { background-image: none } h2{ margin: 0; color: #666; padding-top: 90px; font-size: 52px; font-family: "trebuchet ms", sans-serif; } .item{ background: #333; text-align: center; heightxxx: 300px !important; } .carousel{ margin-top: 20px; } .bs-example{ margin: 20px; } .carousel .item { -webkit-transition: opacity 3s; -moz-transition: opacity 3s; -ms-transition: opacity 3s; -o-transition: opacity 3s; transition: opacity 3s; } .carousel .active.left { left:0;opacity:0;z-index:2; } .carousel .next { left:0;opacity:1;z-index:1; }

// excellent optoin for c. http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-carousel.php $(document).ready(function(){ $("#myCarousel").carousel({ interval : false, pause: true, keyboard: true }); });