Bootstrap Carousel Transitions and Prev/Next Buttons Not Working

javascript jquery twitter-bootstrap slideshow carousel
user1691664 picture user1691664 · Sep 23, 2012 · Viewed 77.9k times · Source

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.

Answer

user2139170 picture user2139170 · Mar 6, 2013

I had the same problem, even including .js in the propper order, and I fixed it unsing javascript on 'onclick' event as follows:

<a class="left carousel-control" href="#myCarousel" data-slide="prev" onclick="$('#myCarousel').carousel('prev')">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next" onclick="$('#myCarousel').carousel('next')">›</a>

I know that it's not the cleanest solution but it works.

Related questions

How to open a Bootstrap modal window using jQuery?

I'm using Twitter Bootstrap modal window functionality. When someone clicks submit on my form, I want to show the modal window upon clicking the "submit button" in the form. <form id="myform" class="form-wizard"> <h2 class="form-wizard-heading"&…

Read More
Passing data to a bootstrap modal

I've got a couple of hyperlinks that each have an ID attached. When I click on this link, I want to open a modal ( http://twitter.github.com/bootstrap/javascript.html#modals ), and pass this ID to the modal. I …

Read More
The data-toggle attributes in Twitter Bootstrap

What does data-toggle attributes do in Twitter Bootstrap? I couldn't find an answer in Bootstrap API. I have seen a similar question before as well, link. But it didn't help me much.

Read More