使用图像指示器更改 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.

我把所有的selector设置成opacity 0.5后，不能把active的class改成opacity 1，所以想求教如何改变image selector的opacity。

这是我的选择器代码：

<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 class。 Bootstrap 将在其父元素上添加 class，即 li。

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

检查下面的代码片段，我在不透明度发生变化的地方添加了一些带有图像指示器的图像。单击“运行代码片段”按钮以实时查看：

@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>

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

Change opacity in Bootstrap carousel with image indicator

html

css

bootstrap-carousel

bootstrap-4