Question

所以我的问题是旋转木马和标题一样。

直到现在我检查了很少的解决方案，用旋转木马重写整个部分5次，问题仍然是相同的：

Carousel仅显示1个（活动）项目，它不会循环，当您单击其中一个指示符时，它只会下降大约200px（看起来像“滚动点击”给我）。

这是我的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。

现在轮播工作没有任何问题！我希望有人会发现这篇文章很有用。

Bootstrap Carousel - 根本不骑自行车

2 个答案: