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;
}
활성 표시등이 가득 유일하게 표시해야하며, 활동의 목록 항목 클래스가 변경되지 않기 때문에 나머지는이 일이 발생하지 중공해야한다 클릭 한 후 클래스 = "#"를
를? 네가 할 수 있다면 너를 도울 수있어. – vikrantnegi007
선생님, 사용하시는 부트 스트랩 또는 JQuery의 버전은 무엇입니까? –
바이올린에서 잘 작동합니다. [여기] (https://jsfiddle.net/DTcHh/31474/) – MUT