javascriptjquerytwitter-bootstrapslideshowcarousel

Bootstrap Carousel Transitions and Prev/Next Buttons Not Working

I'm trying to implement the twitter bootstrap carousel, and it's not working - it doesn't switch images automatically, AND the previous/next buttons don't work.

I've tried switching to jquery 1.7.1 as suggested on Bootstrap Carousel Not Automatically Sliding and Bootstrap Carousel Not working, but nothing seems to help.

Any ideas would be appreciated.

<!DOCTYPE html>
<html>
    <head>
        <title>Slideshow Test</title>
        <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
        <script src="js/bootstrap.js"></script>
        <script src="js/jquery-1.7.1.min.js"></script>
        <script src="js/bootstrap-transition.js"></script>
    </head>
    <body>
        <div id="myCarousel" class="carousel slide" style="width:450px">
            <!-- Carousel items -->
            <div class="carousel-inner">
                <div class="item active"><img src="img/IMG_2.jpg"></div>                
                <div class="item"><img src="img/IMG_3.jpg"></div>
                <div class="item"><img src="img/IMG_1.jpg"></div>
                <!-- Carousel nav -->
                <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
            </div>
        </div>    
    </body>
</html>

You can view it and its linked files at www.abbymilberg.com/bootstrap.

Solution

  • You should include bootstrap.js after you include jquery.js:

    <script src="js/jquery-1.7.1.min.js"></script>
<script src="js/bootstrap.js"></script>