<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> <div data-slide-no="1" class="item carousel-item"> <img src="http://lorempixel.com/1920/1080/food" alt=""> </div> <div data-slide-no="2" class="item carousel-item"> <img src="http://lorempixel.com/1920/1080/cats" alt=""> </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> </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 { top: 35px; background: #404549; padding: 30px; border-radius: 10px; } .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 { padding: 35px; text-align: center; } .carousel-caption h4 { font-family: "lato"; font-weight: 100; font-size: 61px; } .carousel-caption p { font-family: "lato"; margin-top: 39px; 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 { width: 80% !important; padding-left: 10%; margin-top: 35px; }

// Generated by CoffeeScript 1.7.1 $(document).ready(function() { $(".carousel").carousel({ interval: 2000 }); $(".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"); }); });