纯CSS中图像滑块下的进度条

Question

我想在纯CSS的滑块下制作一个进度条。 我的滑块中有两个图像，显示第一个图像时，条形必须为50％，显示第二个图像时，条形必须为100％。

但是我无法按预期显示第二个图像的条，切换到该条时该条不会调整大小（图像滑块工作正常）

你能帮助我吗 ？

谢谢 ！ 奥黛丽

  #slider { position: relative; width: 100%; height: 400px; overflow: hidden; } #images_slider { position: absolute; top: 0; left: 0; margin: 0; padding: 0; width: 100%; height: 400px; } #images_slider li { display: flex; } #images_slider img { width: 100%; height: 450px; } #image_gars:target #image_fille { left: -150%; } #banniere #bouton_prev { position: absolute; left : 0; top: 42%; border : solid rgba(153,153,153,0.2) 0.1px; background-color: rgba(153,153,153,0.2); width: 25px; height: 50px; border-top-right-radius: 100px; border-bottom-right-radius: 100px; padding-top: 10px; padding-right: 5px; z-index: 6; } .fa.fa-chevron-left { position: absolute; left : 0; top: 45%; margin-left: 5px; color: white; z-index: 4; } #banniere #bouton_next { position: absolute; right: 0; top: 42%; border : solid rgba(153,153,153,0.2) 0.1px; background-color: rgba(153,153,153,0.2); border-top-left-radius: 100px; border-bottom-left-radius: 100px; padding-top: 10px; padding-left: 5px; width: 25px; height: 50px; z-index: 6; } .fa.fa-chevron-right { position: absolute; right: 0; top: 45%; color: white; margin-right: 5px; z-index: 4; } #ProgressBar { width: 100%; height: 5px; background-color: #A6A6A6; } #Progress { width: 50%; background-color: rgb(53,151,183); height: 100%; } #bouton_next:target #Progress { width: 100%; background-color: blue; height: 100%; } 

  <div id="banniere"> <div id="slider"> <ul id="images_slider"> <li><img src="images/slider/fillepeinture.jpg" alt="Petite fille avec les mains pleine de peinture" id="image_fille"/></li> <li><img src="images/slider/garconmegaphone.jpg" alt="Petit garçon avec un mégaphone" id="image_gars"/></li> </ul> </div> <a href="#image_fille" id="bouton_prev"></a> <a href="#image_gars" id="bouton_next"></a> <i class="fa fa-chevron-right" aria-hidden="true"></i> <i class="fa fa-chevron-left" aria-hidden="true"></i> </div> <div id="ProgressBar"> <div id="Progress"></div> </div> 

Answer 1

我对此又刺了一下。 当您指出重复的ID是一个问题时，您是对的。 通过锚可以定位的多个ID，事实证明它们都不是定位的。

我添加了一个包含div，该div现在带有触发ID，并重新处理了图像和进度div的css以使用容器的目标状态打开和关闭：

 #ProgressBar div { border: 1px solid black; color: red; font-style: italic; } #ProgressBar .image_fille { width: 50%; } #ProgressBar .image_gars { width: 100%; } .container .image_fille { display: block; } .container .image_gars { display: none; } .container:target .image_fille { display: none; } .container:target .image_gars { display: block; } 

 <div class="container" id="image_gars"> <div id="banniere"> <img class="image_fille" src="" alt="image fille" /> <img class="image_gars" src="" alt="image gars" /> <a href="#image_fille" id="bouton_prev">bouton prev</a> <a href="#image_gars" id="bouton_next">bouton next</a> </div> <div id="ProgressBar"> <div class="image_fille">half progress</div> <div class="image_gars">full progress</div> </div> </div>