以前、CSSのみで作るスライダーについて質問しまして、ご回答頂いたので
その通りに修正しまして、うまくいったのですが、その後、私が何かおかしないじりかたをしてしまったのか
挙動がおかしくなってしまいました。
2つ目にスライドさせようとすると2つ目以降の文字がスライドされて消えてしまいます。
うまく1つずつスライドさせるにはどうしたらいいでしょうか?
.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:400%; min-width:100%; display:inline-flex; -webkit-transition:-webkit-transform .5s ease-out; transition:transform .5s ease-out; } .slider__content__item { flex: 1 1 0; display:inline-block; height:100%; z-index:10; vertical-align:top; } .slider__content { width: 400%; display:inline-flex; /* white-space:nowrap; <- 削除 */ } .slider__content__item { flex: 1 1 0; } .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(-25%, 0, 0); transform:translate3d(-25%, 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(-50%, 0, 0); transform:translate3d(-50%, 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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/05/06 04:08
2018/05/06 04:24
退会済みユーザー
2018/05/06 06:15