BS4 轮播指示器在点击时突出显示错误的图片(活动)

Question

我正在制作一个BS4旋转木马。 我正在使用Jquery来获取要显示的图像。 这些图像被命名为1.jpg - 72.jpg一切正常，除了指标缩略图在单击时突出显示错误的图像。

如果单击图像 2，则突出显示图像 3 等。

我找不到为什么会发生这种情况。

这是一把小提琴

我使用此Jquery来获取图像并将它们附加到div。

$(document).ready(function(){
for(var j = 1; j < 72; j++) {
$('<div class="carousel-item"><img src=" ./images/'+ j+'.jpg " width="100%">   
</div>').appendTo('.carousel-inner');
$('<li data-target="#carousel" data-slide-to="'+j+'"><img  src=" ./images/'+ j+'.jpg " class="img- fluid"></li>').appendTo('.carousel-indicators')
console.log(j);
}
$('.carousel-item').first().addClass('active');
$('.carousel-indicators > li').first().addClass('active');
$('#carousel').carousel({
pause: true,
interval: true,
});
});

HTML只是基本的。

<div id="carousel" class="carousel slide" data-interval="false">            
<div class='carousel-outer'>
<div class="carousel-inner"></div>      
<a class="carousel-control-prev" href="#carousel" data-slide="prev"> <span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#carousel" data-slide="next"> <span class="carousel-control-next-icon"></span>
</a>
</div>
<!-- Indicators -->
<ol class="carousel-indicators"></ol>
</div>

CSS

#carousel {
margin: 20px auto;
max-height:658px;
width: 1024px;
}
#carousel .carousel-indicators {
flex-wrap: wrap;
justify-content: center; 
padding: 0 15px; 
width: 100%; 
position: static; 
right: 0; 
bottom: 0; 
margin-right: 0; 
margin-left: 0; 
}
#carousel .carousel-indicators li {
background-color: transparent;
-webkit-border-radius: 0;
border-radius: 0;
display: inline-block;
height: auto;
margin: 0 !important;
width: auto;
}
#carousel .carousel-indicators li img {
width: 50px;
display: block;
opacity: 0.9;
}
#carousel .carousel-indicators li.active img {
opacity: 1;
}
#carousel .carousel-indicators li:hover img {
opacity: 0.75;
}
#carousel .carousel-outer {
position: relative;
}
.carousel-item-next, .carousel-item-prev, .carousel-item.active {
display: block !important;
}

Answer 1

很可能是因为循环从 1 而不是 0 开始。

可能的解决方法是将data-slide-to属性的值更改为j - 1而不是j：

$(document).ready(function(){
for(var j = 1; j < 72; j++) {
$('<div class="carousel-item"><img src=" ./images/'+ j +'.jpg " width="100%"></div>').appendTo('.carousel-inner');
$('<li data-target="#carousel" data-slide-to="'+ (j - 1) +'"><img  src=" ./images/'+ j +'.jpg " class="img- fluid"></li>').appendTo('.carousel-indicators')
console.log(j);
}
$('.carousel-item').first().addClass('active');
$('.carousel-indicators > li').first().addClass('active');
$('#carousel').carousel({
pause: true,
interval: true,
});
});

Answer 2

我认为问题在于 for 循环它从 1 开始，对于数据滑动到它必须以 0 开头，所以你可以试试这个

$('<li data-target="#carousel" data-slide-to="'+(j-1)+'"><img  src=" ./images/'+ j+'.jpg " class="img- fluid"></li>').appendTo('.carousel-indicators')

Answer 3

将data-slide-to="'+j+'"更改为data-slide-to="'+ (j - 1) +'"