"Carousel with indicators"
Bootstrap 3.3.0 Snippet by Tiago188

<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="span12 carousel-container"> <div id="carousel" class="carousel slide carousel-fade"> <!-- Carousel items --> <div class="carousel-inner"> <div data-slide-no="0" class="item carousel-item active"> <img src="http://lorempixel.com/1920/1080/animals" alt=""> <div class="carousel-caption"> <h4>We Help You Estimate!</h4> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <br /> <a href="http://bootsnipp.com/snippets/xxRN" target="_blank">Carousel original</a> </div> </div> <div data-slide-no="1" class="item carousel-item"> <img src="http://lorempixel.com/1920/1080/food" alt=""> <div class="carousel-caption"> <h4>second thumbnail</h4> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> </div> </div> <div data-slide-no="2" class="item carousel-item"> <img src="http://lorempixel.com/1920/1080/cats" alt=""> <div class="carousel-caption"> <h4>Third Thumbnail label</h4> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</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> --> <ol class="carousel-indicators"> <li data-target="#carousel" data-slide-to="0" class="myCarousel-target active"></li> <li data-target="#carousel" data-slide-to="1" class="myCarousel-target"></li> <li data-target="#carousel" data-slide-to="2" class="myCarousel-target"></li> </ol> </div> </div> </div> </div>
.carousel>.carousel-inner>.item>.circleElement { background-color: #000; border-radius: 50%; position: absolute; top: 11%; left: 39%; width: 400px; height: 400px; opacity: .5; } .carousel-indicators { background: none; border-radius: 4px; bottom: 0; text-align: center; } .carousel-indicators li { cursor: pointer } .carousel-control { width: 60px; height: 0; margin-top: -20px; font-size: 100px; background: none; border: none; font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: 300; } .carousel-indicators li { background-color: #999; background-color: rgba(255,255,255,0.3); } .carousel-caption { background-color: rgba(0, 0, 0, 0.5); bottom: 0; left: unset; padding: 30px 35px; text-align: center; right: unset; } .carousel-caption h4 { font-family: "lato"; font-weight: 100; font-size: 54px; } .carousel-caption p { font-family: "lato"; font-size: 22px; margin-bottom: -8px; font-weight: 300; line-height: 30px; } .carousel-fade .carousel-inner .item { opacity: 0; -webkit-transition-property: opacity; -moz-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; } .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 } @media only screen and (max-width:767px) { h1 { font-size: 30px !important } .carousel-caption { padding: 15px; text-align: center; } .carousel-caption h4 { font-size: 30px } .carousel-caption p { margin-top: 10px; font-size: 10px; margin-bottom: -10px; } body { padding: 0 !important } .carousel { margin-bottom: 0 } .hero-unit { padding-bottom: 60px } .hero-unit p { font-size: 16px } } .carousel-container { margin: 20px auto 0; width: 80% !important; } /* KM Fix */
// Generated by CoffeeScript 1.7.1 $(document).ready(function() { $(".carousel").carousel({ interval: 4000 }); $(".carousel").on("slid", function() { var to_slide; to_slide = $(".carousel-item.active").attr("data-slide-no"); $(".myCarousel-target.active").removeClass("active"); $(".carousel-indicators [data-slide-to=" + to_slide + "]").addClass("active"); }); $(".myCarousel-target").on("click", function() { $(this).preventDefault(); $(".carousel").carousel(parseInt($(this).attr("data-slide-to"))); $(".myCarousel-target.active").removeClass("active"); $(this).addClass("active"); }); });

Related: See More


Questions / Comments: