javascript - Twitter Bootstrap Carousel，点击点 1 或 2 激活图像，但点击点 3 或 4 没有反应

Question

我正在尝试将 Bootstrap Carousel 与 4 张图片一起使用。
当我点击点号 1 或 2 时，图像会按预期立即显示 (ok)。但是当我点击 3 号或 4 号点时，图像不会立即显示 (NOK)。当 30 秒的时间到期时(确定)，所有 4 张图像都会一张一张显示。单击左箭头(或右箭头)可以立即显示上一张(或下一张)图像(确定)。

index.html 和 styles.css 的源代码可以在这里找到: https://jsfiddle.net/leventy7/ow6stx67/2/

<!-- Indicators -->
<ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active" id="carousel-indicator-li-id1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1" id="carousel-indicator-li-id2"></li>
    <li data target="#carousel-example-generic" data-slide-to="2" id="carousel-indicator-li-id3"></li>
    <li data target="#carousel-example-generic" data-slide-to="3" id="carousel-indicator-li-id4"></li>
</ol>

结果(带有旋转木马的图像)可以在这里看到:
http://test-my-bs-carousel.bitballoon.com/

如果有人能给我提示，我将不胜感激。我对 CSS 和 Bootstrap 比较陌生。

非常感谢和亲切的问候

莱文

Answer 1

我从您的 fiddle 中复制了文件并自己尝试了。问题出在您的 html 文件上。您在数据目标中遗漏了一个连字符。

<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active" id="carousel-indicator-li-id1"></li>
<li data-target="#carousel-example-generic" data-slide-to="1" id="carousel-indicator-li-id2"></li>
<li data target="#carousel-example-generic" data-slide-to="2" id="carousel-indicator-li-id3"></li>
<li data target="#carousel-example-generic" data-slide-to="3" id="carousel-indicator-li-id4"></li>

这是正确的代码片段。

<ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active" id="carousel-indicator-li-id1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1" id="carousel-indicator-li-id2"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2" id="carousel-indicator-li-id3"></li>
        <li data-target="#carousel-example-generic" data-slide-to="3" id="carousel-indicator-li-id4"></li>
</ol>

DEMO IN JSFIDDLE