下記はスライダーです。
右の ＞ ボタンを押すと次のスライドに移動するようになっているはずなのですが、
スライドさせる前から画像にあるように、２つ目のスライドが１つ目にきてしまっています。
また、２つ目にスライドさせても２つ目がきちんと表示されません。
どうしたらいいでしょうか？アドバイスを頂けると幸いです。
「スライド前」
「スライド後」
<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
}
```
Q&A
ベストアンサー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
退会済みユーザー
2018/05/05 14:44