Bootstrap 3 Carousel won't work. (Yes, I have jQuery loaded before Bootstrap)

carousel, jquery, twitter-bootstrap, twitter-bootstrap-3

Solution

Try one `carousel-inner` with multiple `item`s inside..

<div id="Carousel" class="carousel slide">
        <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>

        <div class="carousel-inner">
            <div class="item active">
                <img src="img/Carousel/001.jpg">
            </div>
            <div class="item">
                <img src="img/Carousel/002.jpg">
            </div>
            <div class="item">
                <img src="img/Carousel/003.jpg">
            </div>
        </div>

        <a class="left carousel-control" href="#Carousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#Carousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>

Demo: http://bootply.com/72622

Problem

I'm converting an application to Bootstrap 3. Here's the code to my sample carousel page, in its entirety. Yes, I have jQuery loaded before the Bootstrap.js gets loaded. For whatever reason, the carousel simply will not work. Specifically: the previous/next buttons don't work and the carousel doesn't automatically slide to the next slide. Tested against: - Safari 6.0.5 - Chrome 28.0.1500.95 - Firefox 23.0 ...on Mac OS X 10.8.4 ``` <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--[if lt IE 9]> <script src="" alt-src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script src="http://code.jquery.com/jquery.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap-glyphicons.css" type="text/css"> <title>Carousel Test</title> <meta name="description" content=""> <meta name="keywords" content=""> <script> // Added this just so I didn't have to wait 5 seconds to see if the transition worked. // $(document).ready(function() { $('#Carousel').carousel({ interval: 1000 }); }); </script> </head> <body> <div id="Carousel" class="carousel slide"> <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> <div class="carousel-inner"> <div class="item active"> <img src="img/Carousel/001.jpg"> </div> </div> <div class="carousel-inner"> <div class="item"> <img src="img/Carousel/002.jpg"> </div> </div> <div class="carousel-inner"> <div class="item"> <img src="img/Carousel/003.jpg"> </div> </div> <a class="left carousel-control" href="#Carousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#Carousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </body> </html> ``` Anyone have an insight on why this is not working?

Original source