BootStrap 3轮播无效

时间:2013-12-25 08:08:10

标签: javascript twitter-bootstrap-3 carousel

这是代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
        <link href="css/bootstrap.min.css" rel="stylesheet" />

</head>
<body>
        <div>
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="Images/Design/facebook.png" alt="..."/>
                        <div class="carousel-caption">
                            <h3>...</h3>
                            <p>...</p>
                        </div>
                    </div>
                    <div class="item ">
                        <img src="Images/Design/linkedin.png" alt="..."/>
                        <div class="carousel-caption">
                            <h3>...</h3>
                            <p>...</p>
                        </div>
                    </div>
                    <div class="item ">
                        <img src="Images/Design/yahoo.jpg" alt="..."/>
                        <div class="carousel-caption">
                            <h3>...</h3>
                            <p>...</p>
                        </div>
                    </div>
                    <div class="item ">
                        <img src="Images/Design/Mahdi_Hesari@YMail.com.jpg" alt="..."/>
                        <div class="carousel-caption">
                            <h3>...</h3>
                            <p>...</p>
                        </div>
                    </div>
                </div>

                <!-- Controls -->
                <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div>

        </div>
    <script src="js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/jquery.js"></script>

</body>
</html>

我认为每件事都可以,而且必须有效。但即使我点击下一个和上一个按钮,它也无法正常工作。 问题出在哪里?

我在visual studio 2012中使用了bootsrap v3.0.3。

非常感谢

2 个答案:

答案 0 :(得分:2)

你必须包括第一个jQuery库,然后是bootstrap.js:

<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

可能,您目前收到此错误:未捕获的ReferenceError:未定义jQuery

答案 1 :(得分:1)

您需要颠倒包含jquery / bootstrap js文件的顺序。 Bootstrap将jquery作为先决条件,因此它需要在加载时找到它。