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.

回答1:

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>

回答2:

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.

回答3:

I had the same issue and I fixed it by adding z-index to the css:

.carousel-control.left, .carousel-control.right {
  left: 0;
  z-index: 1;
}

回答4:

Try closing "carousel-inner" before the controls start

<div id="myCarousel" class="carousel slide" style="width:450px">
    <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>
    </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>

回答5:

<div class="left carousel-control" data-target="#myCarousel" data-slide="prev"/>
          <span class="glyphicon glyphicon-chevron-left"></span>
          <span class="sr-only">Previous</span>
</div>
<div class="right carousel-control" data-target="#myCarousel" data-slide="next"/>
          <span class="glyphicon glyphicon-chevron-right"></span>
          <span class="sr-only">Next</span>
</div>

回答6:

Further to the answer by user2139170, this is the correct way to structure your carousel (BootStrap 3.3.5):

jsFiddle Example

<div id="myCarousel" class="carousel slide text-center" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <h4>A mind-bending lecture on applied philosophy by Oxford lecturer Ravi Zacharias.</h4>
            <br>
            <span class="font-normal">youtube/watch?v=3ZZaoavCsYE</span>
        </div>
        <div class="item">
            <h4>Director of the Human Genome Project discusses the greatest mystery of life</h4>
            <br>
            <span class="font-normal">youtube/watch?v=EGu_VtbpWhE</span>
        </div>
    </div>

    <a href="" class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a href="" class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div><!-- #myCarousel -->

<script>
    $(function(){

        $('.carousel-control').click(function(e){
            e.preventDefault();
            $('#myCarousel').carousel( $(this).data() );
        });

    });//END document.ready
</script>

Note: this answer requires jQuery, so ensure that library is loaded. Of course, bootstrap requires jQuery so you should already have it referenced.

回答7:

I had the same symptoms, but my problem was that I didn't included an id to my carousel. Adding an id on the same div that has the .carousel class, and using href="#my-carousel" on the button/links solved the problem for me, as suggested by other users in the comments.

<div id="my-carousel" class="carousel slide" style="width:450px">
            ^----------------------------------v
    <a class="carousel-control left" href="#my-carousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#my-carousel" data-slide="next">&rsaquo;</a>
</div>

来源：https://stackoverflow.com/questions/12548954/bootstrap-carousel-transitions-and-prev-next-buttons-not-working

标签

javascript

jquery

twitter-bootstrap

slideshow

carousel