"Bootstrap Carousel with Controls and Navbar"
Bootstrap 3.2.0 Snippet by The Nickel-Dime

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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-fluid" id="slideshow_page-wrapper"> <div class="row"> <div class="col-sm-12"> <div class="Slideshow_carousel-wrapper container-fluid"> <span class="Slideshow-ctl-L" onclick="carousel_left()"></span> <div id="slideshow_carousel" class="carousel slide" data-ride="carousel" data-interval="3000"> <div class="carousel-inner Slideshow"> <div class="item active"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> </div> <span class="Slideshow-ctl-R" onclick="carousel_right()"></span> </div> <div class="container-fluid Slideshow_progress-bar"> <ul id="slideshow_progress" class="Slideshow_progress"></ul> </div> </div> </div> </div> <script> $('#slideshow_carousel').bind('slide.bs.carousel', function (e) { carouselHelper(); }); </script>
HTML, BODY { overflow-x:hidden; position:relative; width: 100%; height: 700px; background-color:black; } #slideshow_page-wrapper { position: relative; padding:0; width:100%; height: 100%; background-color:black; } .carousel-inner, .carousel-inner .item { height:100%; width:100%; } .carousel-fade .carousel-inner > .item { transition-property: opacity; } .carousel-fade .carousel-inner > .item, .carousel-fade .carousel-inner > .item.active.left { opacity: 0; } .carousel-fade .carousel-inner > .item.active, .carousel-fade .carousel-inner > .item.next.left { opacity: 1; } .carousel-fade .carousel-inner > .next, .carousel-fade .carousel-inner > .prev, .carousel-fade .carousel-inner > .active.left, .carousel-fade .carousel-inner > .active.right { left: 0; } .carousel-fade .carousel-inner > .item.next, .carousel-fade .carousel-inner > .item.active.right, .carousel-fade .carousel-inner > .item.prev, .carousel-fade .carousel-inner > .item.active.left { transform: translate3d(0, 0, 0); } .carousel-fade { opacity:1; z-index: 200; } .Slideshow_carousel-wrapper { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; text-align:center; width:100%; } /* SLIDESHOW CONTROLS LEFT / RIGHT */ .Slideshow-ctl-L { -webkit-flex: none; flex: none; z-index:200; top:40%; margin-right:5px; height:60px; width:16px; opacity:0.7; background-size:15px 60px; background-repeat:no-repeat; background-image: url("http://nickel-dime.com/OPENSRC/arrowL.png"); } .Slideshow-ctl-R { -webkit-flex: none; flex: none; top:40%; margin-left:5px; height:60px; width:15px; opacity:0.7; background-size:15px 60px; background-repeat:no-repeat; background-image: url("http://nickel-dime.com/OPENSRC/arrowR.png"); } @media (min-width:500px) { .Slideshow-ctl-L { top:40%; left:0px; height:80px; width:20px; background-size:20px 80px; } .Slideshow-ctl-R { top:40%; right:0px; height:80px; width:20px; background-size:20px 80px; } } .Slideshow-ctl-L:hover, .Slideshow-ctl-L:active, .Slideshow-ctl-L:focus { opacity:1.0; } .Slideshow-ctl-R:hover, .Slideshow-ctl-R:active, .Slideshow-ctl-R:focus { opacity:1.0; } /* PROGRESS NAVBAR OUTER BOX */ .Slideshow_progress-bar { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; clear:both; bottom:0px; } @media (max-width:370px) { .Slideshow_progress-bar { margin-left:-10px; } } /* INNER FORMATTING BOX */ .Slideshow_progress { display:table; float:none; list-style-type:none; width:91vw; max-width:450px; height:30px; margin: 30px auto 0 auto; padding:0; text-align:middle; vertical-align:middle; } @media (min-width:768px) { .Slideshow_progress { width:450px; } } /* RECT THAT CHANGES COLOR FOR EACH SLIDE */ .Slideshow_progress-nugget { display:table-cell; float:none; width:auto; height:30px; border-style: solid; border-left-width:1px; border-top-width:2px; border-bottom-width:2px; border-right-width:1px; } .item:nth-child(n) { background-position:50% 50%; background-size:cover; background-repeat:no-repeat; } #slideshow_carousel { -webkit-flex: none; flex: none; z-index:50; top:15px; height:300px; width:300px; overflow:hidden; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); } #slideshow_progress { transform:translateX(-5px); border: #a44601 2.5px solid; } #slideshow_progress .Slideshow_progress-nugget { background-color:#d66e00; border-color: #a44601; border-style:solid; } #slideshow_progress .Slideshow_progress-nugget:hover, #slideshow_progress .Slideshow_progress-nugget:active, #slideshow_progress .Slideshow_progress-nugget:focus { border-color: yellow; background-color:yellow; } .Slideshow-current { border-color:#a44601 !important; background-color:orange !important; } .Slideshow-current:hover, .Slideshow-current:active, .Slideshow-current:focus { border-color:yellow !important; background-color:yellow !important; } @media (min-width:500px) { #slideshow_carousel { height:425px; width:425px; } } /* SLIDESHOW IMAGES */ .Slideshow .item:nth-child(1) { background-image: url("http://nickel-dime.com/OPENSRC/GALLERY/slideshow_0.jpg"); } .Slideshow .item:nth-child(2) { background-image: url("http://nickel-dime.com/OPENSRC/GALLERY/slideshow_1.jpg"); } .Slideshow .item:nth-child(3) { background-image: url("http://nickel-dime.com/OPENSRC/GALLERY/slideshow_2.jpg"); } .Slideshow .item:nth-child(4) { background-image: url("http://nickel-dime.com/OPENSRC/GALLERY/slideshow_3.jpg"); } .Slideshow .item:nth-child(5) { background-image: url("http://nickel-dime.com/OPENSRC/GALLERY/slideshow_4.jpg"); } .Slideshow .item:nth-child(6) { background-image: url("http://nickel-dime.com/OPENSRC/GALLERY/slideshow_5.jpg"); } .Slideshow .item:nth-child(7) { background-image: url("http://nickel-dime.com/OPENSRC/GALLERY/slideshow_6.jpg"); } .Slideshow .item:nth-child(8) { background-image: url("http://nickel-dime.com/OPENSRC/GALLERY/slideshow_7.jpg"); } .Slideshow .item:nth-child(9) { background-image: url("http://nickel-dime.com/OPENSRC/GALLERY/slideshow_8.jpg"); } .Slideshow .item:nth-child(10) { background-image: url("http://nickel-dime.com/OPENSRC/GALLERY/slideshow_9.jpg"); }
$(document).ready( function() { initProgressBar(); }); // CHANGE THIS WHEN YOU ADD MORE SLIDES var TotalSlides = 10; var ProgressBar= 0; var CurrentSlide = 0; // 0 == left 1 == right var Direction = 1; // BUILD THE PROGRESS BAR BASED ON NUMBER OF SLIDES IN CAROUSEL function initProgressBar() { var counter=0; var head; var middle; var tail; // for each slide in the carousel $(".Slideshow").children("div").each( function() { head = "<li class='Slideshow_progress-nugget"; if (counter === 0) { head += " Slideshow-current"; } middle = "' onclick='progressClick("; tail = ")'><span></span></li>"; $("#slideshow_progress").append( head + middle + counter + tail); counter++; }); } // // RIGHT AND LEFT CAROUSEL CTLS // function carousel_left() { Direction = 0; if (CurrentSlide > 0) { $("#slideshow_carousel").carousel( "prev" ); } } function carousel_right() { Direction = 1; if ((CurrentSlide + 1) < TotalSlides) { $("#slideshow_carousel").carousel( "next" ); } else { progressClick(0); } } // // CLICK ON PROGRESS BAR // function progressClick( index ) { ProgressBar = index; progressBarTo( ProgressBar ); // scroll the carousel $("#slideshow_carousel").carousel( index ); } // // CALLBACK ON CAROUSEL SLIDE // function carouselHelper() { // coming here on regular scroll if (ProgressBar == CurrentSlide) { // next if ((Direction == 1) && (++CurrentSlide >= TotalSlides)) { // wraparound CurrentSlide = 0; // prev } else if (Direction === 0) { if (--CurrentSlide < 0) { CurrentSlide = 0; } } progressBarTo( CurrentSlide ); } else { // coming here because of progress bar click CurrentSlide = ProgressBar; } } // // FORWARD/BACKWARD SCROLL PROGRESS BAR // function progressBarTo(index) { var nugget = $("#slideshow_progress .Slideshow_progress-nugget"); $.each(nugget, function (i, nug) { if (i <= index) { ProgressBar = i; $(nug).addClass("Slideshow-current"); } else { $(nug).removeClass("Slideshow-current"); } }); }

Related: See More


Questions / Comments: