CSS轮播幻灯片的z-index

Question

朋友们，我想创建自己的纯CSS基于旋转木马，带有用于导航的单选按钮。它工作正常，但有一个问题，我无法解决，请你的指导。 无论何时检查无线电，其相关幻灯片都会以更高的z-index动画到前方。问题是默认情况下所有其他幻灯片具有相同的z-index，因此最后一张幻灯片始终在后面可见。 有没有办法在不使用任何脚本的情况下在后面显示先前检查过的幻灯片？ 这是演示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>