1
私はブートストラップ回転式カルーセルを作成し、インジケータをクリックすると現在のスライドが変更されますが、インジケータが変更されないことを意味するスライドのクラスはアクティブに変わりません。ブートストラップ回転式アクティブクラスが変更されない
<body>
<div class="container">
<div class="row">
<div class="#">
<div id="my-slider" class="carousel slide container" data-ride="carousel">
<!--indicators dot nav-->
<ol class="carousel-indicators">
<li data-target="#my-slider" data-slide-to="0" class="active"></li>
<li data-target="#my-slider" data-slide-to="1"></li>
<li data-target="#my-slider" data-slide-to="2"></li>
</ol>
<!--wrapper for slides-->
<div class="carousel-inner" role="listbox">
<div class="item one active">
<img src="images/IMG_6737.png" alt="The Shard" />
</div>
<div class="item two">
<img src="images/IMG_6630.png" alt="A London Barbers" />
</div>
<div class="item three">
<img src="images/IMG_6659.png" alt="A London Bar"/>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
とCSS：
*{
margin: 0;
padding: 0;
}
.carousel {z-index: -99;}
.carousel .item{
position: fixed;
width: 100%; height: 100%;
}
.carousel .one {
background: url(images/IMG_6737.png);
background-size: cover;
background-repeat: no-repeat;
}
.carousel .two {
background: url(images/IMG_6630.png);
background-size: cover;
background-repeat: no-repeat;
}
.carousel .three {
background: url(images/IMG_6630.png);
background-size: cover;
background-repeat: no-repeat;
}
.carousel .active .left{
left:0;
opacity: 1;
}
.carousel-indicators {
position: fixed;
top:0;
float: left;
padding-bottom: 50px;
z-index: 30;
margin-top: 40px;
}
.carousel-indicators li{
width: 30px;
height: 30px;
border-radius: 1;
margin: 0 10px;
border-radius: 100%;
}
.carousel-indicators .active{
width: 30px;
height: 30px;
margin: 0 10px;
}
アクティブインジケータが満たされている唯一の指標であるべきであり、有効のリスト項目のクラスが変更されていないので、残りはこれが起こらない中空でなければなりませんクリックされた後クラス= "＃" と
あなたは作業jsfiddleまたはcodepenデモを提供することはできますか？あなたがそれをすることができれば、私はあなたを助けることができます。 – vikrantnegi007
さん、あなたに教えてもらえますか？使用しているブートストラップまたはJQueryのどのバージョンですか？ –
フィドルでうまく動作します。 [ここをクリック]（https://jsfiddle.net/DTcHh/31474/） – MUT