CSSのみで作ったスライドショー。きちんと最後まで綺麗に表示されない。

下記のコードは文字列のみのスライドショーで手動でスライドさせています。
しかし、このスライドショーは、４つ目のスライドから５個目のスライドに移動させようとすると挙動がおかしくなります。
5個目に移動すると思ったら、まだ６個目があるのに１個目に戻り、そこから２個めにスライドさせると一瞬１個目が
表示されてから２個目、３個目が表示されてしまいます。

どうしたら６個目まで綺麗に表示させる事ができるでしょうか。
（※投稿の文字数制限があったので戻るボタンの部分のCSSは省略してあります。）

「スライドショー１個目」

<HTML> ```ここに言語を入力 <div id="sub_box"> <div class="css3-slider"> <div class="slider-view"> <input type="radio" id="slider-back1" class="slider-radio" name="slider"> <input type="radio" id="slider-back2" class="slider-radio" name="slider"> <input type="radio" id="slider-back3" class="slider-radio" name="slider"> <input type="radio" id="slider-back4" class="slider-radio" name="slider"> <input type="radio" id="slider-back5" class="slider-radio" name="slider"> <input type="radio" id="slider-back6" class="slider-radio" name="slider">

  <input type="radio" id="slider-next1" class="slider-radio" name="slider">
  <input type="radio" id="slider-next2" class="slider-radio" name="slider">
  <input type="radio" id="slider-next3" class="slider-radio" name="slider">
  <input type="radio" id="slider-next4" class="slider-radio" name="slider">
  <input type="radio" id="slider-next5" class="slider-radio" name="slider">
  <input type="radio" id="slider-next6" class="slider-radio" name="slider">
  
  <div class="slider-view__controllers">
    <div class="slider-view__controllers__icon-set">
      <label for="slider-back1" class="slider-back"> ＜ </label>
      <label for="slider-next1" class="slider-next"> ＞ </label>
    </div>
    <div class="slider-view__controllers__icon-set">
      <label for="slider-back2" class="slider-back"> ＜ </label>
      <label for="slider-next2" class="slider-next"> ＞ </label>
    </div>
    <div class="slider-view__controllers__icon-set">
      <label for="slider-back3" class="slider-back"> ＜ </label>
      <label for="slider-next3" class="slider-next"> ＞ </label>
    </div>
    <div class="slider-view__controllers__icon-set">
      <label for="slider-back4" class="slider-back"> ＜ </label>
      <label for="slider-next4" class="slider-next"> ＞ </label>
    </div>
    <div class="slider-view__controllers__icon-set">
      <label for="slider-back5" class="slider-back"> ＜ </label>
      <label for="slider-next5" class="slider-next"> ＞ </label>
    </div>
    <div class="slider-view__controllers__icon-set">
      <label for="slider-back6" class="slider-back"> ＜ </label>
      <label for="slider-next6" class="slider-next"> ＞ </label>
    </div>
  </div>
  <div class="slider-view__move">
    <div class="slider__content__item_ slider-view__move_text">
      <p>制作の流れ</p>
    </div>
    <div class="slider-view__move_text">
      <h2>02.</h2>
      <p class="text_p1">TEST <B/p>
      <p class="text_p2">テストテストテストテストテストテストテストテストテストテスト</p>
    </div>
    <div class="slider-view__move_text">
      <h2>03.</h2>
      <p class="text_p1">TEST C</p>
      <p class="text_p2">テストテストテストテストテストテストテストテストテストテスト</p>
    </div>
    <div class="slider-view__move_text">
      <h2>04.</h2>
      <p class="text_p1">TEST D</p>
      <p class="text_p2">テストテストテストテストテストテストテストテストテストテスト</p>
    </div>
    <div class="slider-view__move_text">
      <h2>05.</h2>
      <p class="text_p1">TEST E</p>
      <p class="text_p2">テストテストテストテストテストテストテストテストテストテスト</p>
    </div>
    <div class="slider-view__move_text">
      <h2>06.</h2>
      <p class="text_p1">TEST F</p>
      <p class="text_p2">テストテストテストテストテストテストテストテストテストテスト</p>
    </div>
  </div>
</div>

</div> </div> ``` <CSS> ```ここに言語を入力 /* スライダー用のinputは非表示 */ .slider-radio { display: none; }

/* スライダー部分 */
.css3-slider {
	margin: 0 auto;
	width: 600px;
}
.slider-view {
	height:400px;
	overflow: hidden;
	position: relative;
	width: 100%;
}
.slider-view__move {
	position: absolute;
}
.slider-view__move_text {
	width: 600px;
}
.slider-view__move_text:nth-of-type(1) { left: 0; position: absolute; }
.slider-view__move_text:nth-of-type(2) { left: 600px; position: absolute; }
.slider-view__move_text:nth-of-type(3) { left: 1200px; position: absolute; }
.slider-view__move_text:nth-of-type(4) { left: 1800px; position: absolute; }
.slider-view__move_text:nth-of-type(5) { left: 2400px; position: absolute; }
.slider-view__move_text:nth-of-type(6) { left: 3000px; position: absolute; }

/* スライドショーの文字に設定するアニメーション */
#slider-next1:checked ~ .slider-view__move {
	-webkit-animation:
		slider-next1-animation 1s linear 1 normal 0s both
	;
	animation:
		slider-next1-animation 1s linear 1 normal 0s both
	;
}
#slider-next2:checked ~ .slider-view__move {
	-webkit-animation:
		slider-next2-animation 1s linear 1 normal 0s both
	;
	animation:
		slider-next2-animation 1s linear 1 normal 0s both
	;
}
#slider-next3:checked ~ .slider-view__move {
	-webkit-animation:
		slider-next3-animation 1s linear 1 normal 0s both
	;
	animation:
		slider-next3-animation 1s linear 1 normal 0s both
	;
}
#slider-next4:checked ~ .slider-view__move {
	-webkit-animation:
		slider-next4-animation 1s linear 1 normal 0s both
	;
	animation:
		slider-next4-animation 1s linear 1 normal 0s both
	;
}
#slider-next5:checked ~ .slider-view__move {
	-webkit-animation:
		slider-next5-animation 1s linear 1 normal 0s both
	;
	animation:
		slider-next5-animation 1s linear 1 normal 0s both
	;
}
#slider-next6:checked ~ .slider-view__move {
	-webkit-animation:
		slider-next6-animation 1s linear 1 normal 0s both
	;
	animation:
		slider-next6-animation 1s linear 1 normal 0s both
	;
}

/* アニメーションの設定 */
@keyframes slider-next1-animation {
	0%  { left: 0; }
	100% { left: -600px; }
}
@keyframes slider-next2-animation {
	0%  { left: -600px; }
	100% { left: -1200px; }
}
@keyframes slider-next3-animation {
	0%  { left: -1200px; }
	100% { left: -1800px; }
}
@keyframes slider-next4-animation {
	0%  { left: -1800px; }
	100% { left: -2400px; }
}
@keyframes slider-next5-animation {
	0%  { left: -2400px; }
	100% { left: -3000px; }
}
@keyframes slider-next6-animation {
	0%  { left: -3000px; }
	0% { left: -3600px; }
}

/* 前後に進むためのボタン部分 */
.slider-view__controllers {
    position: relative;
    top: 40%;
    z-index: 9999;
}
.slider-view__controllers__icon-set {
	display: none;
    position: relative;
}
.slider-view__controllers__icon-set:nth-of-type(1) {
	display: block;
}
.slider-back, .slider-next {
	position: absolute;
}
.slider-next {
	right: 0;
}

/* 前後に進むためのボタンがクリックされた時の挙動 */
#slider-next1:checked ~ .slider-view__controllers > .slider-view__controllers__icon-set:nth-of-type(1)
,#slider-next2:checked ~ .slider-view__controllers > .slider-view__controllers__icon-set:nth-of-type(2)
,#slider-next3:checked ~ .slider-view__controllers > .slider-view__controllers__icon-set:nth-of-type(3)
,#slider-next4:checked ~ .slider-view__controllers > .slider-view__controllers__icon-set:nth-of-type(4)
,#slider-next5:checked ~ .slider-view__controllers > .slider-view__controllers__icon-set:nth-of-type(5)
,#slider-next6:checked ~ .slider-view__controllers > .slider-view__controllers__icon-set:nth-of-type(6)
{
	display: none;
}
#slider-next1:checked ~ .slider-view__controllers > .slider-view__controllers__icon-set:nth-of-type(2)
,#slider-next2:checked ~ .slider-view__controllers > .slider-view__controllers__icon-set:nth-of-type(3)
,#slider-next3:checked ~ .slider-view__controllers > .slider-view__controllers__icon-set:nth-of-type(4)
,#slider-next4:checked ~ .slider-view__controllers > .slider-view__controllers__icon-set:nth-of-type(5)
,#slider-next5:checked ~ .slider-view__controllers > .slider-view__controllers__icon-set:nth-of-type(6)
,#slider-next6:checked ~ .slider-view__controllers > .slider-view__controllers__icon-set:nth-of-type(1)
{
	display: block;
}

#sub_box {
width:650px;
border: solid #000 1px;
}

.slider__content__item_ {
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
display: -webkit-flex;
-ms-justify-content: center;
-ms-align-items: center;
display: -ms-flex;
display: flex; /* flexコンテナ化 */
font-size:42px;
font-weight:bold;
text-align:center;
}

h2 {
margin:20px 0 15px 60px;
color:#47A095;
}

.text_p1 {
margin:0 60px 20px 60px;
font-size:24px;
font-weight:bold;
}

.text_p2 {
margin:0 60px 0 60px;
}

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

回答1件

ベストアンサー

HTML 50行目

html
1          <p class="text_p1">TEST B/p> <!-- 誤 -->
2          <p class="text_p1">TEST B</p>

HTML 68行目

html
1        <div class="sslider-view__move_text"> <!-- 誤 -->
2        <div class="slider-view__move_text">

CSS 99行目

css
1        100% { left: -3000opx; } /* 誤 */
2        100% { left: -3000px; }

CSS 103行目

css
1        100% { left: -3600opx; } /* 誤 */
2        100% { left: -3600px; }

また、おそらく103行目は

css
1        100% { left: 0; }

にしないと1ページ目に戻らないのではないかと思いますがいかがでしょうか？

投稿2018/07/19 00:15

dit.

総合スコア3235

退会済みユーザー

2018/07/19 04:03

ありがとうございます。すいません。ご指摘いただいたのは全てここでの記述ミスです。それから戻るに関してはちゃんと動いているのですが、進むボタンに説明にあるように異常があります。

退会済みユーザー

2018/07/19 04:09

修正しました！

退会済みユーザー

2018/07/19 04:18

すいません！これは実は１万文字以上ある元のソースコードがあるのですが、そこも「3600opx」となっていました。申し訳ありません。何度も見返したのですが、全然気づきませんでした。キチンと動いております。お騒がせいたしました！

dit.

2018/07/19 04:22

6→1も大丈夫そうですね。解決できたようで何よりです。

退会済みユーザー

2018/07/19 04:25

大丈夫そうです。おかしいなぁ。２０回以上見直していたのですが…本当にケアレスミスです。お騒がせしました。

dit.

2018/07/19 04:53

6→1大丈夫そう…と書きましたが、FirefoxとChromeで見た際、一瞬白くなりますね。 @keyframes slider-next6-animation { 0% { left: 0; } 100% { left: 0; } } にすることで解消できるかもしれません。スクロールして戻るようにしたい場合 @keyframes slider-next6-animation { 0% { left: -3000px; } 100% { left: 0; } } で。

退会済みユーザー

2018/07/19 08:18 編集

ありがとうございます。試してみます！今IEとEdgeで確認してみましたがボタン部分を押しても次に進まないですね。一応IEやEdgeでもキレイに表示されるスライドショーではあったのですが、動かないのはわかりませんでした。 labelあたりが悪さをしているようです。

dit.

2018/07/19 08:20

現在質問にのせているコード(2スライド目の閉じタグだけ要修正)だけでテストしても同じですか？

退会済みユーザー

2018/07/19 08:32

理解度が低くてすいません。２スライド目の閉じタグとはHTMLのほうですか？

退会済みユーザー

2018/07/19 08:42

あ！わかりました！修正しましたがダメでした。IE,Edgeでは＞や＜の文字列で作られたlabelのボタンが押せません。