引导旋转木马转场和上一页/下一页按键不灵(Bootstrap Carousel Transition

我试图实现Twitter的引导旋转木马，和它不工作 - 它不会自动切换图像和上一张/下按钮不起作用。

我试图切换到的jQuery 1.7.1上的建议引导旋转木马无法自动滑动和引导传送带不工作，但似乎没有任何帮助。

任何想法，将不胜感激。

<!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>

您可以查看它和它的链接文件www.abbymilberg.com/bootstrap 。

Answer 1:

你应该包括bootstrap.js你包括的jquery.js后：

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

Answer 2:

我有同样的问题，甚至包括在propper顺序.js和我固定它的“onClick”事件unsing的javascript如下：

<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>

我知道这是不是干净的解决方案，但它的工作原理。

Answer 3:

请尝试关闭“旋转木马内”前的控制开始

<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>

Answer 4:

我有同样的问题，我加入的z-index的CSS固定它：

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

Answer 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>

Answer 6:

为了进一步推动答案user2139170 ，这是构建你的旋转木马（引导3.3.5）的正确方法：

的jsfiddle例

<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>

注意：这个答案需要jQuery的，所以要确保库加载。 当然，引导jQuery的需要，所以你应该已经拥有了它引用。

Answer 7:

我有同样的症状，但我的问题是，我并没有包含一个id我的旋转木马。对具有同一div添加一个id .carousel类，并使用href="#my-carousel"上的按钮/链接解决了这个问题对我来说，通过在注释中其他用户的建议。

<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>

文章来源: Bootstrap Carousel Transitions and Prev/Next Buttons Not Working