カルーセルインジケータはブートストラップでは機能しません

Question

私は8つの画像からなるカルーセルを作りようとしていましたが、インジケータは左右どちらの矢印も動作しません。自分のコードに何が問題なのか分かりません。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div id="myCarousel" class="carousel slide carousel1" data-ride="carousel"> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#i1" data-slide-to="0" class="active"></li> 
 
    <li data-target="#i2" data-slide-to="1"></li> 
 
    <li data-target="#i3" data-slide-to="2"></li> 
 
    <li data-target="#i4" data-slide-to="3"></li> 
 
    <li data-target="#i5" data-slide-to="4"></li> 
 
    <li data-target="#i6" data-slide-to="5"></li> 
 
    <li data-target="#i7" data-slide-to="6"></li> 
 
    <li data-target="#i8" data-slide-to="7"></li> 
 
    </ol> 
 

 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev" role="button"> 
 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
    </a> 
 
    <a class="right carousel-control" href="#myCarousel" data-slide="next" role="button"> 
 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
    </a> 
 
</div>

Answer 1

データターゲットは、あなたのケース要素ID myCarouselに、カルーセルセレクタなければなりません。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<style>.item { 
 
    height: 100px; 
 
} 
 
.item:nth-child(odd) { 
 
    background-color: lightblue; 
 
} 
 

 
.item:nth-child(even) { 
 
    background-color: lightgreen; 
 
}</style> 
 
<div id="myCarousel" class="carousel slide carousel1" data-ride="carousel"> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
    <li data-target="#myCarousel" data-slide-to="1"></li> 
 
    <li data-target="#myCarousel" data-slide-to="2"></li> 
 
    <li data-target="#myCarousel" data-slide-to="3"></li> 
 
    <li data-target="#myCarousel" data-slide-to="4"></li> 
 
    <li data-target="#myCarousel" data-slide-to="5"></li> 
 
    <li data-target="#myCarousel" data-slide-to="6"></li> 
 
    <li data-target="#myCarousel" data-slide-to="7"></li> 
 
    </ol> 
 
    
 
    <div class="carousel-inner"> 
 
    <div class="item active"> 
 
    </div> 
 
    <div class="item"> 
 
    </div> 
 
    <div class="item"> 
 
    </div> 
 
    <div class="item"> 
 
    </div> 
 
    <div class="item"> 
 
    </div> 
 
    <div class="item"> 
 
    </div> 
 
    <div class="item"> 
 
    </div> 
 
    <div class="item"> 
 
    </div> 
 
    </div> 
 

 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev" role="button"> 
 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
    </a> 
 
    <a class="right carousel-control" href="#myCarousel" data-slide="next" role="button"> 
 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
    </a> 
 
</div>