Bootstrap Carousel Transitions和Prev/Next按钮不起作用

Question

Bootstrap Carousel Transitions和Prev/Next按钮不起作用

4 javascript jquery slideshow carousel twitter-bootstrap

我正在尝试实现twitter bootstrap carousel,它不能正常工作 - 它不会自动切换图像,而且上一个/下一个按钮不起作用.

我已经尝试切换到jquery 1.7.1按照建议在Bootstrap Carousel Not Automatically Sliding和Bootstrap Carousel不工作,但似乎没有任何帮助.

任何想法,将不胜感激.

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

Run Code Online (Sandbox Code Playgroud)

您可以在www.abbymilberg.com/bootstrap上查看它及其链接的文件.

Answer 1

小智 16

我有同样的问题,甚至在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>

Run Code Online (Sandbox Code Playgroud)

我知道这不是最干净的解决方案,但它有效.

如果您遇到此问题,请确保prev/next按钮中的href引用正确的ID.它应该是#id(jquery表示法).应该不需要添加onclick. (8认同)
同样的问题在这里我正在寻找`onclick`脏修复,但如果你碰巧知道为什么它不起作用我会很高兴听到它. (2认同)

Answer 2

Dan*_*kov 9

在包含jquery.js之后应该包含bootstrap.js:

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

Run Code Online (Sandbox Code Playgroud)

此外,**bootstrap-transition.js**应该在所有其他Bootstrap插件之前(但仍然在jQuery之后,正如Daniil正确识别的那样). (5认同)

归档时间：	13 年，3 月前
查看次数：	66555 次
最近记录：	6 年，5 月前