Currently, I am in the process of creating an HTML page featuring a Bootstrap carousel. To enhance user interaction, I have replaced the standard selector with images that, when clicked, will transition the slider to display corresponding content.
In order to add another layer of visual appeal, I sought to adjust the opacity of the image selectors based on the active slide within the carousel. Initially setting all selectors at 0.5 opacity, I intended for each one to change to full opacity (1) when its respective slide is displayed. However, I encountered difficulty implementing this feature and now seek guidance on alternative methods to achieve the desired effect.
The following code outlines the structure of my image 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>
Although I attempted to apply the following CSS rule, it did not produce the desired outcome:
.carousel-indicators .img.active {
opacity:1;
}