Question

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

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

你能帮帮我吗？

谢谢！奥黛丽

＆＃13;

    #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%;
     }

＆＃13;

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

＆＃13;

Answer 1

我再次捅了一下。当你指出重复的ID是个问题时，你是对的。如果有一个可以被锚定的ID，那么事实证明它们都没有被定位。

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

1 个答案: