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

Question

我正在制作一个包含 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;
}

Answer 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" alt="" />
    </li>
    <li data-target="#carouselWithImageIndicators" data-slide-to="1">
      <img class="d-block w-100" src="https://source.unsplash.com/5PVXkqt2s9k/100x100" alt="" />
    </li>
    <li data-target="#carouselWithImageIndicators" data-slide-to="2">
      <img class="d-block w-100" src="https://source.unsplash.com/NE0XGVKTmcA/100x100" alt="" />
    </li>
    <li data-target="#carouselWithImageIndicators" data-slide-to="3">
      <img class="d-block w-100" src="https://source.unsplash.com/ewfHXBcuFA0/100x100" alt="" />
    </li>
    <li data-target="#carouselWithImageIndicators" data-slide-to="4">
      <img class="d-block w-100" src="https://source.unsplash.com/n3c5pSoD2Fc/100x100" alt="" />
    </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" alt="" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://source.unsplash.com/5PVXkqt2s9k/1600x900" alt="" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://source.unsplash.com/NE0XGVKTmcA/1600x900" alt="" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://source.unsplash.com/ewfHXBcuFA0/1600x900" alt="" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://source.unsplash.com/n3c5pSoD2Fc/1600x900" alt="" />
    </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>