Change opacity in Bootstrap carousel with image indicator

Question

I am making an HTML page that contains a Bootstrap carousel. I replaced the selector with the image. Then, by clicking the image, the slider will also change.

I wanted to make the image selector opacity change according to the content in the slider change. For example, all the image selector initial opacity is 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.

After I made all the selectors into opacity 0.5, it can't change the active class to opacity 1. Thus, I wanted to request ways to change the opacity of the image selector.

This is the code of my selector:

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

I did try to do this but it fails

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

Answer 1

Your selector (.carousel-indicators .img.active) doesn't work, because your .img element will never have an .active class. Bootstrap will add the class on its parent element, which is the li.

You can change the active indicator's style by using the .carousel-indicators .active selector. Also, you can place the image right inside the li element you don't need another div.

Check the snippet below, I've added a few images with image indicators where the opacity changes. Click on the "Run code snippet" button to see it in live:

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