使用图像指示器更改 Bootstrap 轮播中的不透明度

Posted 2023-05-08

【中文标题】使用图像指示器更改 Bootstrap 轮播中的不透明度

【英文标题】：Change opacity in Bootstrap carousel with image indicator

【发布时间】：2021-03-27 23:54:59

【问题描述】：

我正在制作一个包含 Bootstrap 轮播的 html 页面。我用图像替换了选择器。然后，通过单击图像，滑块也会发生变化。

我想根据滑块中的内容更改图像选择器的不透明度。例如，所有图像选择器的初始不透明度都是 0.5。 When the selector shows the first item, the opacity of the first slider will change to 1. And so on for the slider 2 and 3.

在我将所有选择器都设置为 opacity 0.5 后，它无法将活动类更改为 opacity 1。因此，我想请求更改图像选择器不透明度的方法。

这是我的选择器的代码：

<ol class="carousel-indicators">
  <li data-target="#myCarousel" data-slide-to="0" class="active">
   <div class="img">
    <img src="xx.jpg" />
   </div>
  </li>
  <li data-target="#myCarousel" data-slide-to="1">
   <div class="img">
    <img src="xx.jpg" />
   </div>
  </li>
  <li data-target="#myCarousel" data-slide-to="2">
   <div class="img">
    <img src="xx.jpg" />
   </div>
 </li>
</ol>

我确实尝试过这样做，但失败了

.carousel-indicators .img.active 
  opacity:1;

【参考方案1】：

您的选择器 (.carousel-indicators .img.active) 不起作用，因为您的 .img 元素永远不会有 .active 类。 Bootstrap 将在其父元素上添加该类，即li。

您可以使用.carousel-indicators .active 选择器更改活动指示器的样式。此外，您可以将图像放在不需要另一个 div 的 li 元素内。

检查下面的 sn-p，我添加了一些带有图像指示符的图像，其中不透明度发生了变化。点击“Run code sn-p”按钮即可现场查看：

@import url("https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css");
.carousel-indicators li 
  border: 2px solid rgba(255, 255, 255, 0.5);
  height: 50px;
  margin-left: 2px;
  margin-right: 2px;
  opacity: 0.5;
  width: 50px;


.carousel-indicators li::after 
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.75);
  content: '';
  display: block;
  height: 1px;
  width: 100%;


.carousel-indicators .active 
  opacity: 1;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<div id="carouselWithImageIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselWithImageIndicators" data-slide-to="0" class="active">
      <img class="d-block w-100" src="https://source.unsplash.com/2rHw1I_IoT4/100x100"  />
    </li>
    <li data-target="#carouselWithImageIndicators" data-slide-to="1">
      <img class="d-block w-100" src="https://source.unsplash.com/5PVXkqt2s9k/100x100"  />
    </li>
    <li data-target="#carouselWithImageIndicators" data-slide-to="2">
      <img class="d-block w-100" src="https://source.unsplash.com/NE0XGVKTmcA/100x100"  />
    </li>
    <li data-target="#carouselWithImageIndicators" data-slide-to="3">
      <img class="d-block w-100" src="https://source.unsplash.com/ewfHXBcuFA0/100x100"  />
    </li>
    <li data-target="#carouselWithImageIndicators" data-slide-to="4">
      <img class="d-block w-100" src="https://source.unsplash.com/n3c5pSoD2Fc/100x100"  />
    </li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://source.unsplash.com/2rHw1I_IoT4/1600x900"  />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://source.unsplash.com/5PVXkqt2s9k/1600x900"  />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://source.unsplash.com/NE0XGVKTmcA/1600x900"  />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://source.unsplash.com/ewfHXBcuFA0/1600x900"  />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://source.unsplash.com/n3c5pSoD2Fc/1600x900"  />
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselWithImageIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselWithImageIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>