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 开始,所以你可以试试这个

$('&lt;li data-target="#carousel" data-slide-to="'+(j-1)+'"&gt;&lt;img  src=" ./images/'+ j+'.jpg " class="img- fluid"&gt;&lt;/li&gt;').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 IOS 中的轮播视图(图像)

如何在 Xamarin.Forms 中为轮播实现活动指示器?

轮播指示器未显示或移动到幻灯片中的下一张图像上

如何在 UIImage 上像 UIButton 一样在点击时实现突出显示?

在表格视图单元格中显示活动指示器