Question

由于某种原因，我的自举转盘不起作用。我一次又一次地重新检查我的代码，但我仍然无法弄清楚我的代码有什么问题。任何帮助将不胜感激。

这些是我的HTML中的API调用：

<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<script src="js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.carousel').carousel()
    });   
</script>

这是Bootstrap Carousel的实际代码：

<div id="myCarousel" class="carousel slide"><!-- .carousel -->

    <div class="carousel-inner">
        <div class="active-item"><img src="images/Qatar.jpg" alt="" width="1200"  style="border-radius:10px;" alt="Slide 1"/></div>
        <div class="item"><img src="images/QC.jpg" alt="" width="1200" style="border-radius:10px;" alt="Slide 1"/></div>
    </div>

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

Answer 1

试试这个小提琴：http://jsfiddle.net/RazGP/3/

一些清理项目：

删除了多个alt属性
将slide 1更改为slide 2（当然，对于幻灯片2）
将active-item更改为active item
调整小提琴选项（左侧窗格）：
- 包含jQuery 1.7.2
- 包括bootstrap
- 设置为在domReady上运行

<强> HTML

<div id="myCarousel" class="carousel slide">
<!-- .carousel -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="images/Qatar.jpg" width="1200" style="border-radius:10px;" alt="Slide 1" />
        </div>
        <div class="item">
            <img src="images/QC.jpg" width="1200" style="border-radius:10px;" alt="Slide 2" />
        </div>
    </div> 

    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

<!-- .carousel -->
</div>

Answer 2

<script src="js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

错误的顺序包括引导前的jquery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

Answer 3

@Sean我已经在chrome控制台中找到了错误。错误是：无法加载资源：net :: ERR_FILE_NOT_FOUND，未捕获TypeError：undefined不是函数，Uncaught ReferenceError：$未定义

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>这将继承主机名即文件\，因此您无法找到file://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js，

尝试<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>而不是

我猜您是从本地磁盘而不是从Web服务器打开浏览器：）

Answer 4

感谢您的建议。然而，事实证明，我的旋转木马没有工作，因为我有这样的标签：

<div class="active-item"></div>,

应该是这样的：

<div class="item active"></div>.  Basically, my syntax was wrong.

我仍然感谢您的善意建议！

Bootstrap Carousel没有回应

4 个答案: