純粋なCSSのイメージスライダの下のプログレスバー

Question

純粋なCSSのスライダの下にプログレスバーを作成したいと思います。スライダに2つの画像があり、最初の画像が表示されているときは50％、2番目の画像が表示されているときは100％になっていなければなりません。第二の画像のためのバーは予想通り、私は表示できないが、それに切り替える際に、バーのサイズを変更しません

（画像スライダが正常に動作します）

あなたは私を助けることができますか？

ありがとうございました！ オードリー

#slider { 
 
\t  position: relative;  
 
\t  width: 100%;   
 
\t  height: 400px;  
 
\t  overflow: hidden;  
 
    } 
 

 
    #images_slider { 
 
\t  position: absolute; 
 
\t  top: 0;    
 
\t  left: 0;    
 
\t  margin: 0;    
 
\t  padding: 0; 
 
     width: 100%;   
 
\t  height: 400px; \t 
 
    } 
 

 
    #images_slider li { 
 
\t  display: flex;  
 
    } 
 

 
    #images_slider img { 
 
\t  width: 100%; 
 
\t  height: 450px; 
 
    } 
 

 
    #image_gars:target #image_fille { 
 
\t  left: -150%; 
 
    } 
 

 
    #banniere #bouton_prev { 
 
\t  position: absolute; 
 
\t  left : 0; 
 
\t  top: 42%; 
 
\t  border : solid rgba(153,153,153,0.2) 0.1px; 
 
\t  background-color: rgba(153,153,153,0.2); 
 
\t  width: 25px; 
 
\t  height: 50px; 
 
\t  border-top-right-radius: 100px; 
 
     border-bottom-right-radius: 100px; 
 
     padding-top: 10px; 
 
     padding-right: 5px; 
 
     z-index: 6; 
 
    } 
 

 
    .fa.fa-chevron-left { 
 
\t  position: absolute; 
 
\t  left : 0; 
 
\t  top: 45%; 
 
\t  margin-left: 5px; 
 
\t  color: white; 
 
\t  z-index: 4; 
 
    } 
 

 
    #banniere #bouton_next { 
 
\t  position: absolute; 
 
\t  right: 0; 
 
\t  top: 42%; 
 
\t  border : solid rgba(153,153,153,0.2) 0.1px; 
 
\t  background-color: rgba(153,153,153,0.2); 
 
\t  border-top-left-radius: 100px; 
 
     border-bottom-left-radius: 100px; 
 
     padding-top: 10px; 
 
     padding-left: 5px; 
 
     width: 25px; 
 
\t  height: 50px; 
 
\t  z-index: 6; 
 
    } 
 

 
    .fa.fa-chevron-right { 
 
\t  position: absolute; 
 
\t  right: 0; 
 
\t  top: 45%; 
 
\t  color: white; 
 
\t  margin-right: 5px; 
 
\t  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が複数ある場合、どちらもターゲットにしていないことがわかります。

私は今、トリガーIDを運ぶ含むdiv要素を追加し、オンとオフを切り替えるには、コンテナの目標状態を使用する画像や進捗の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>