Bootstrap 旋转木马 - 根本不循环

Question

所以我的问题是标题中的轮播。

到目前为止，我检查了很少的解决方案，re-write整个部分有 5 次轮播，问题仍然相同：

旋转木马仅显示 1 个（活动的）项目，它不会循环，当您单击其中一个指示器时，它只会下降约 200 像素（对我来说看起来像 "scroll on click"）。

这是我的 HTML:

    <div class="hidden-xs col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
        <div id="carousel" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carousel" data-slide-to="0" class="active"></li>
                <li data-target="#carousel" data-slide-to="1"></li>
                <li data-target="#carousel" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="item active">
                    <img src="img/nauka-jazdy-luton-1.jpg" alt="Slide1">
                </div>
                <div class="item">
                    <img src="img/nauka-jazdy-luton-2.jpg" alt="Slide2">
                </div>
                <div class="item">
                    <img src="img/nauka-jazdy-luton-3.jpg" alt="Slide3">
                </div>
            </div>
        </div>
    </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
<sctipt>$("#carousel").carousel();</sctipt>

和CSS：

.carousel {
    height: 250px;
}

.carousel .item {
    width: auto;
    height: 250px;
    background-color: #878787;
}

.carousel-inner > .item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 250px;
}

Answer 1

这里有码笔http://codepen.io/anon/pen/WxraKr

你好像忘了包含 bootstrap.min.js

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

将此行添加到 JQuery 上方。编码愉快！

Answer 2

我的朋友为此找到了答案，这是 jQuery 的最新版本。我使用的 Bootstrap 版本从 v3 开始不支持 jQuery。

现在轮播没有任何问题了！我希望有人会发现这个 post 有用。

Bootstrap 旋转木马 - 根本不循环

Bootstrap Carousel - not cycling at all

html

css

jquery

carousel

twitter-bootstrap