CSSのみで作ったスライダーがうまくスライドしてくれません。

下記はスライダーです。
右の＞ボタンを押すと次のスライドに移動するようになっているはずなのですが、
スライドさせる前から画像にあるように、２つ目のスライドが１つ目にきてしまっています。
また、２つ目にスライドさせても２つ目がきちんと表示されません。

どうしたらいいでしょうか？アドバイスを頂けると幸いです。

「スライド前」

「スライド後」

<HTML> ```ここに言語を入力 <div class="container"> <div class="slider"> <input id="slide01" type="radio" name="slide" checked="checked"/> <input id="slide02" type="radio" name="slide"/> <input id="slide03" type="radio" name="slide"/> <input id="slide04" type="radio" name="slide"/> <label for="slide01"></label> <label for="slide02"></label> <label for="slide03"></label> <label for="slide04"></label> <div class="slider__content"> <div class="slider__content__item"> <h2>制作の流れ</h2> </div> <div class="slider__content__item"> <p class="sub_title_p">01.</p> <p class="text_p">メールにてお問い合わせ頂いてから、制作完了、納品までの大きな流れをご紹介します。</p> </div> <div class="slider__content__item"> </div> <div class="slider__content__item"> </div> </div> </div> </div> ``` <CSS> ```ここに言語を入力 .container { -webkit-perspective:100px; perspective:100px; height:40vh; background-size:cover; position:relative; } .slider { opacity:.8; filter:alpha(opacity=80); background:#43A1E1; width:600px; height:300px; overflow:hidden; position:absolute; left:50%; top:50%; -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%); } .slider>input { position:absolute; width:0; height:0; top:0; left:0; visibility:hidden; opacity:0; filter:alpha(opacity=0); } .slider>label { position:absolute; top:50%; -webkit-transform:translate(-100%, -50%); -ms-transform:translate(-100%, -50%); transform:translate(-100%, -50%); display:block; width:50px; height:50px; line-height:50px; text-align:center; z-index:1000; cursor:pointer; -webkit-transform:translate(0, -50%); -ms-transform:translate(0, -50%); transform:translate(0, -50%); display:none; font:normal normal normal 14px/1 FontAwesome; text-rendering:auto; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; -webkit-transition:opacity .25s ease-out; transition:opacity .25s ease-out; } .slider>label:hover { opacity:.5; filter:alpha(opacity=50); } .slider__content { height:100%; width:300%; min-width:100%; display:block; white-space:nowrap; -webkit-transition:-webkit-transform .5s ease-out; transition:transform .5s ease-out; } .slider__content__item { display:inline-block; height:100%; z-index:10; vertical-align:top; } .slider #slide01:checked~.slider__content { -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); } .slider #slide01:checked~label[for=slide00] { left:0; display:block } .slider #slide01:checked~label[for=slide00]:before { content:"<"; font-size:50px } .slider #slide01:checked~label[for=slide02] { right:0; display:block } .slider #slide01:checked~label[for=slide02]:before { content:">"; font-size:50px } .slider #slide02:checked~.slider__content { -webkit-transform:translate3d(-33.333333333333336%, 0, 0); transform:translate3d(-33.333333333333336%, 0, 0); } .slider #slide02:checked~label[for=slide01] { left:0; display:block } .slider #slide02:checked~label[for=slide01]:before { content:"<"; font-size:50px } .slider #slide02:checked~label[for=slide03] { right:0; display:block } .slider #slide02:checked~label[for=slide03]:before { content:">"; font-size:50px } .slider #slide03:checked~.slider__content { -webkit-transform:translate3d(-66.66666666666667%, 0, 0); transform:translate3d(-66.66666666666667%, 0, 0); } .slider #slide03:checked~label[for=slide02] { left:0; display:block } .slider #slide03:checked~label[for=slide02]:before { content:"<"; font-size:50px } .slider #slide03:checked~label[for=slide04] { right:0; display:block } .slider #slide03:checked~label[for=slide04]:before { content:">"; font-size:50px } .slider #slide04:checked~.slider__content { -webkit-transform:translate3d(-100%, 0, 0); transform:translate3d(-100%, 0, 0); } .slider #slide04:checked~label[for=slide03] { left:0; display:block } .slider #slide04:checked~label[for=slide03]:before { content:"<"; font-size:50px } .slider #slide04:checked~label[for=slide05] { right:0; display:block } .slider #slide04:checked~label[for=slide05]:before { content:">"; font-size:50px } ```

行動規範の内容に同意します

回答1件

ベストアンサー

各スライドの横幅が設定されてないですね。
あと、.slider-content の幅がスライド3枚を想定した 300% になってたり、
スライドを移動させるときの移動幅も間違ってます。

変更すべき点をまとめると下記のようになります。

css
1.slider__content {
2  width: 400%; /* スライド4枚なので400% */
3  display:inline-flex; /* 各スライドの横幅を簡単に設定するために inline-flex に */
4  /* white-space:nowrap; <- 削除 */
5}
6
7.slider__content__item {
8  flex: 1 1 0; /* 各スライドの横幅を均等に */
9}
10
11.slider #slide02:checked~.slider__content {
12  -webkit-transform:translate3d(-25%, 0, 0);
13  transform:translate3d(-25%, 0, 0); /* 1/4 左側に移動させる */
14}
15
16.slider #slide03:checked~.slider__content {
17  -webkit-transform:translate3d(-50%, 0, 0);
18  transform:translate3d(-50%, 0, 0); /* 2/4 左側に移動させる */
19}
20
21.slider #slide04:checked~.slider__content {
22  -webkit-transform:translate3d(-75%, 0, 0);
23  transform:translate3d(-75%, 0, 0); /* 3/4 左側に移動させる */
24}