Twitter Bootstrap carousel不工作，但以前工作过

Question

我已经创建了一个使用Twitter Bootstrap的网站，一切工作正常。您可以查看网站here!，它是使用旋转木马功能的画廊页面。

我复制并粘贴了我在这个网站上使用的相同代码到我的新网站中，代码是这样的：

<div class="carousel slide tac" id="image-gallery">
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        {% for i, item in items %}
            {% set image = asset(item.getWebPath) %}
            <div class="item" id="item_{{ i }}">
                <img src="{{ asset(image) }}" alt="Silver Spoon">
            </div>
        {% endfor %}
    </div>
    <!-- Controls -->
    <a class="left carousel-control" href="#image-gallery" data-slide="prev">
        <span class="icon-prev"></span>
    </a>
    <a class="right carousel-control" href="#image-gallery" data-slide="next">
        <span class="icon-next"></span>
    </a>
</div>

我已经包括了最新的jQuery和最新的bootstrap.js。

我甚至不需要在我的第一个网站上调用$('.carousel').carousel()，我只需要给它正确的类。所以我试着调用$('.carousel').carousel()，但是它给了我这个错误：

Uncaught TypeError: Object [object Object] has no method 'carousel' 

然后，我做的下一件事是下载源文件，我包含了carousel.js和transition.js，同时仍然包含了整个bootstrap.js。然后这就起作用了。

但我想知道为什么我的第一个网站，一个只需要包括bootstrap.js的网站，工作，而我的第二个网站，我必须包括额外的carousel.js和transition.js。

提前感谢您的帮助！

Answer 1

可以将data-ride="carousel"包含在#image-gallery目录中，也可以通过编写javascript代码$("#image-gallery").carousel();来手动触发轮播，同时不要忘记在代码中包含bootstrap.js和bootstrap.css。