スライダー3枚画像を表示被らずにスライドさせたいです。

Question

スライダーの3枚目が被ってしまいます

スライダーで3枚表示させたいのですが、3枚目が被ってしまっているので、ここを変更させたいです。

該当のソースコード

.slider__content:nth-child(1) {
    animation: sliderAnime 12s ease-in-out infinite;
	z-index: 6;
  }
  
  .slider__content:nth-child(2) {
    animation: sliderAnime2 12s ease-in-out 2s infinite;
	z-index: -1;
  }
  
  .slider__content:nth-child(3) {
    animation: sliderAnime2 12s ease-in-out 6s infinite;
	z-index: -1;
  }
  
  
 @keyframes sliderAnime {
    0% {
        z-index: 5;
        transform: translateX(0);
    }
    16.6% {
        transform: translateX(0);
    }
    33.3% {
        transform: translateX(-100%);
    }
    50% {
        z-index: -1;
        transform: translateX(-100%);
    }
    66.6% {
        transform: translateX(100%);
    }
    83.2% {
        z-index: 5;
        transform: translateX(100%);
    }
    100% {
        z-index: 5;
        transform: translateX(0);
    }
}

@keyframes sliderAnime2 {
    0% {
        z-index: 5;
        transform: translateX(100%);
    }
    16.6% {
        transform: translateX(0);
    }
    33.3% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-100%);
    }
    66.6% {
        z-index: -1;
        transform: translateX(-100%);
    }
    83.2% {
        transform: translateX(100%);
    }
    100% {
        z-index: 5;
        transform: translateX(100%);
    }
}

Comments

[Lhankor_Mhy]

ご提示のコードを試してみましたが、なんか不思議な動きになって問題が再現しませんでした。
（HTMLが不明でしたので、適当に見繕いました）

https://jsfiddle.net/Lhankor_Mhy/jbefqmg4/