下記はスライダーです。
右の > ボタンを押すと次のスライドに移動するようになっているはずなのですが、
スライドさせる前から画像にあるように、2つ目のスライドが1つ目にきてしまっています。
また、2つ目にスライドさせても2つ目がきちんと表示されません。
どうしたらいいでしょうか?アドバイスを頂けると幸いです。
<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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/05/05 14:44