Я создал карусель Bootstrap, и нажатие на индикаторы меняет текущий слайд, но не меняет класс слайда на активный, что означает, что индикатор никогда не меняется.
<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;
}
Активный индикатор должен быть единственным заполненным индикатором, а остальные должны быть пустыми, этого не происходит, потому что класс активных элементов списка не изменяется после нажатия.
