Я пытаюсь циклически перебрать три изображения в карусели (bootstrap 3.3.4), которые имеют переход затухания вместо перехода между слайдами. Первое изображение отображается правильно, и я могу вручную переключаться между изображениями с помощью элементов управления щелчком, но он не будет переключаться автоматически. Есть идеи?
HTML
<div id="myCarousel" class="carousel slide carousel-fade" data-interval="3000">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="" contenteditable="false"></li>
<li data-target="#myCarousel" data-slide-to="1" class="active" contenteditable="false"></li>
<li data-target="#myCarousel" data-slide-to="2" class="" contenteditable="false"></li>
</ol>
<div class="carousel-inner">
<div class="active item" style="">
<img src="..\Images\Hopewell_Rainbow.jpg" alt="" class="" width="3000px"
height="800px">
</div>
<div class="item">
<img src="..\Images\WorshipfulWork.jpg" alt="" class="" width="3000px"
height="800px">
</div>
<div class="item" style="">
<img src="..\Images\Preschool2.jpg" alt="" class="" width="3000px" height="800px">
</div>
</div>
</div>
CSS
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
display: block;
height: auto;
width: 100%;
line-height: 1;
}
.carousel-fade .carousel-inner .item {
opacity: 0;
transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
opacity: 0;
z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}
.carousel-fade .carousel-control {
z-index: 2;
}
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-fade .carousel-inner > .item.next,
.carousel-fade .carousel-inner > .item.active.right {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.prev,
.carousel-fade .carousel-inner > .item.active.left {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.next.left,
.carousel-fade .carousel-inner > .item.prev.right,
.carousel-fade .carousel-inner > .item.active {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}