BS4 轮播指示器在点击时突出显示错误的图像(活动)
Posted
技术标签:
【中文标题】BS4 轮播指示器在点击时突出显示错误的图像(活动)【英文标题】:BS4 carousel indicator highlights wrong image on click (active) 【发布时间】:2020-09-15 17:45:55 【问题描述】:我正在制作一个 BS4 旋转木马。
我正在使用 Jquery 获取要显示的图像。
图片命名为1.jpg - 72.jpg
一切正常,除了指示器缩略图在点击时突出显示错误的图像。
如果单击图像 2,则图像 3 突出显示等。
我不知道为什么会这样。
here is a fiddle
我使用这个Jquery
来获取图像并将它们附加到一个 div 中。
$(document).ready(function()
for(var j = 1; j < 72; j++)
$('<div class="carousel-item"><img src=" ./images/'+ j+'.jpg " >
</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;
【问题讨论】:
【参考方案1】:我认为问题在于 for 循环它从 1 开始,而对于 data-slide-to 它必须从 0 开始,所以你可以试试这个
$('<li data-target="#carousel" data-slide-to="'+(j-1)+'"><img src=" ./images/'+ j+'.jpg " class="img- fluid"></li>').appendTo('.carousel-indicators')
【讨论】:
【参考方案2】:这很可能是因为循环从 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 " ></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,
);
);
【讨论】:
【参考方案3】:将data-slide-to="'+j+'"
更改为data-slide-to="'+ (j - 1) +'"
【讨论】:
以上是关于BS4 轮播指示器在点击时突出显示错误的图像(活动)的主要内容,如果未能解决你的问题,请参考以下文章
Xamarin IOS - Xamarin IOS 中的轮播视图(图像)
如何在 Xamarin.Forms 中为轮播实现活动指示器?