Twitter Bootstrap Carousel、ドット1または2をクリックすると画像がアクティブになりますが、ドット3または4に反応しません。

Question

4つの画像でブートストラップカルーセルを使用しようとしています。
ドット番号1または2をクリックすると、画像はすぐに表示されます（OK）。 しかし、ドット番号3または4をクリックすると、画像はすぐに表示されません（NOK）。 30秒の時間が経過すると（ok）、4つの画像が1つずつ表示されます。 左矢印（または右矢印）をクリックすると、直前（または次）の画像がすぐに表示されます（ok）。

の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

。問題は、あなたの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