<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand"> Skates R Us </a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="index.html">Home</a></li> <li><a href="contact.html">Contact / About</a></li> <li><a href="shop.html">Shop</a></li> <li><a href="new.html">New Products</a></li> <li><a href="media.html">Media</a></li> </ul> </div> </div> </div> <div id="carousel" class="carousel slide" data-ride="carousel"> <!-- Menu --> <ol class="carousel-indicators"> <li data-target="#carousel" data-slide-to="0" class="active"></li> <li data-target="#carousel" data-slide-to="1"></li> <li data-target="#carousel" data-slide-to="2"></li> </ol> <!-- Items --> <div class="carousel-inner"> <div class="item active"> <img src="http://lorempixel.com/1500/600/abstract/1" alt="Slide 1" /> </div> <div class="item"> <img src="http://lorempixel.com/1500/600/abstract/2" alt="Slide 2" /> </div> <div class="item"> <img src="http://lorempixel.com/1500/600/abstract/3" alt="Slide 3" /> </div> </div> <a href="#carousel" class="left carousel-control" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a href="#carousel" class="right carousel-control" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> <!-- Post Info --> <div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'> About this SO Question: <a href='http://stackoverflow.com/q/20639825/1366033'>Bootstrap 3 Carousel Not Working</a><br/> Find documentation: <a href='http://getbootstrap.com/css/'>Get Bootstrap 3.0</a><br/> Fork This Skeleton Here <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap 3.0 Skeleton</a><br/> <div>

.carousel { height: 500px; margin-bottom: 60px; } /* Since positioning the image, we need to help out the caption */ .carousel-caption { z-index: 10; } /* Declare heights because of positioning of img element */ .carousel .item { width: 100%; height: 500px; background-color: #777; } .carousel-inner > .item > img { position: absolute; top: 0; left: 0; min-width: 100%; height: 500px; } @media (min-width: 768px) { .carousel-caption p { margin-bottom: 20px; font-size: 21px; line-height: 1.4; } } img { background: red; }

$("#carousel").carousel();