CSS 캐 러셀 슬라이드의 z- 색인

Question

친구, 내 탐색 용 라디오 버튼이있는 순수 CSS 기반 회전식 컨체인지를 만들고 싶습니다. 그것은 잘 작동하지만 내가 해결할 수없는 하나의 문제가 귀하의 지침을하시기 바랍니다 필요합니다. 라디오가 선택 될 때마다 관련 슬라이드가 더 높은 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>