CSSカルーセルスライドのZ-インデックス

Question

フレンド、ナビゲーション用のラジオボタン付きの自分の純粋なCSSベースのカルーセルを作りたかったのです。それはうまく動作しますが、あなたが解決できない1つの問題があり、あなたの指導をお願いします。 ラジオがチェックされるたびに、関連するスライドが高いZインデックスで前面にアニメーション表示されます。問題は、デフォルトでは他のすべてのスライドが同じZインデックスを持つため、最後のスライドは常に背面に表示されます。 スクリプトを使用せずに前に確認したスライドを背面に表示する方法はありますか？ ここでは、このように意味デモhttps://jsfiddle.net/alikhan99/sg9qy5um/1/

#slider { 
 
    display: block; 
 
    width: 100%; 
 
    height: 100vh; 
 
    overflow: hidden; 
 
} 
 

 
.slideWrapper { 
 
    position: relative; 
 
    top: 0; 
 
    right: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.slide { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
    background-color: #666; 
 
    color: #fff; 
 
    left: 0; 
 
    z-index: 1; 
 
} 
 

 
.slide2 { 
 
    background-color: #090; 
 
} 
 

 
.slide3 { 
 
    background-color: #009; 
 
} 
 

 
.slide4 { 
 
    background-color: #900; 
 
} 
 

 
#slide1:checked~.slideWrapper .slide:first-child, 
 
#slide2:checked~.slideWrapper .slide:nth-child(2), 
 
#slide3:checked~.slideWrapper .slide:nth-child(3), 
 
#slide4:checked~.slideWrapper .slide:nth-child(4) { 
 
    z-index: 2; 
 
    animation: slideAnimation 4s ease 0s forwards; 
 
} 
 

 
@keyframes slideAnimation { 
 
    from { 
 
    transform: scaleX(0); 
 
    } 
 
    to { 
 
    transform: scaleX(1); 
 
    } 
 
}

<div id="slider"> 
 
    <input checked type='radio' name='slider' id='slide1' /> 
 
    <input type='radio' name='slider' id='slide2' /> 
 
    <input type='radio' name='slider' id='slide3' /> 
 
    <input type='radio' name='slider' id='slide4' /> 
 

 
    <div class="slideWrapper"> 
 
    <div class="slide slide1"> 
 
     <div class="slideContent"> 
 
     <h2>Slide One</h2> 
 
     </div> 
 
    </div> 
 

 
    <div class="slide slide2"> 
 
     <div class="slideContent"> 
 
     <h2>Slide Two</h2> 
 
     </div> 
 
    </div> 
 

 
    <div class="slide slide3"> 
 
     <div class="slideWContent"> 
 
     <h2>Slide Three</h2> 
 
     </div> 
 
    </div> 
 

 
    <div class="slide slide4"> 
 
     <div class="slideWContent"> 
 
     <h2>Slide Four</h2> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

はありますか？

#slider { 
 
    display: block; 
 
    width: 100%; 
 
    height: 100vh; 
 
    overflow: hidden; 
 
} 
 

 
.slideWrapper { 
 
    position: relative; 
 
    top: 0; 
 
    right: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.slide { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
    background-color: #666; 
 
    color: #fff; 
 
    left: 0; 
 
    z-index: 1; 
 
    animation: slideAnimation1 4s ease 0s forwards; 
 
} 
 

 
.slide2 { 
 
    background-color: #090; 
 
} 
 

 
.slide3 { 
 
    background-color: #009; 
 
} 
 

 
.slide4 { 
 
    background-color: #900; 
 
} 
 

 
#slide1:checked~.slideWrapper .slide:first-child, 
 
#slide2:checked~.slideWrapper .slide:nth-child(2), 
 
#slide3:checked~.slideWrapper .slide:nth-child(3), 
 
#slide4:checked~.slideWrapper .slide:nth-child(4) { 
 
    z-index: 2; 
 
    animation: slideAnimation 4s ease 0s forwards; 
 
} 
 

 
@keyframes slideAnimation { 
 
    from { 
 
    transform: scaleX(0); 
 
    } 
 
    to { 
 
    transform: scaleX(1); 
 
    } 
 
} 
 
@keyframes slideAnimation1 { 
 
    from { 
 
    transform: scaleX(1); 
 
    } 
 
    to { 
 
    transform: scaleX(0); 
 
    } 
 
}

<div id="slider"> 
 
    <input checked type='radio' name='slider' id='slide1' /> 
 
    <input type='radio' name='slider' id='slide2' /> 
 
    <input type='radio' name='slider' id='slide3' /> 
 
    <input type='radio' name='slider' id='slide4' /> 
 

 
    <div class="slideWrapper"> 
 
    <div class="slide slide1"> 
 
     <div class="slideContent"> 
 
     <h2>Slide One</h2> 
 
     </div> 
 
    </div> 
 

 
    <div class="slide slide2"> 
 
     <div class="slideContent"> 
 
     <h2>Slide Two</h2> 
 
     </div> 
 
    </div> 
 

 
    <div class="slide slide3"> 
 
     <div class="slideWContent"> 
 
     <h2>Slide Three</h2> 
 
     </div> 
 
    </div> 
 

 
    <div class="slide slide4"> 
 
     <div class="slideWContent"> 
 
     <h2>Slide Four</h2> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>