度々似たような質問ですいません。
このような質問は最後にします。
CSSのみで作ったクリックでスライドする4枚のスライドショーです。
これを5枚目以降追加すると表示がおかしくなります。
raidoボタン、labelを5個目、6個目と増やしていき、slider__contentクラスのwidthをスライドする要素の分だけ100%ずつ追加し、
.slider #slide05:checked~.slider__content { -webkit-transform:translate3d(-75%, 0, 0); transform:translate3d(-75%, 0, 0); } .slider #slide05:checked~label[for=slide03] { left:0; display:block } .slider #slide05:checked~label[for=slide03]:before { content:"<"; font-size:50px } .slider #slide05:checked~label[for=slide05] { right:0; display:block } .slider #slide05:checked~label[for=slide05]:before { content:">"; font-size:50px }
ここをHTMLで追加した要素に合わせてクラス名を変更しながらCSSに追加し、
-webkit-transform:translate3d(-75%, 0, 0); transform:translate3d(-75%, 0, 0);
ここを増やした要素に合わせて25%ずつ増やしているのですが、5枚目から表示がおかしくなります。
5枚目以降、何枚追加してもうまく表示されるようにするにはどうしたらいいでしょうか。
.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:checkedlabel[for=slide00] {label[for=slide00]:before {
left:0;
display:block
}
.slider #slide01:checked
content:"<";
font-size:50px
}
.slider #slide01:checkedlabel[for=slide02] {label[for=slide02]:before {
right:0;
display:block
}
.slider #slide01:checked
content:">";
font-size:50px
}
.slider #slide02:checked~.slider__content {
-webkit-transform:translate3d(-25%, 0, 0);
transform:translate3d(-25%, 0, 0);
}
.slider #slide02:checkedlabel[for=slide01] {label[for=slide01]:before {
left:0;
display:block
}
.slider #slide02:checked
content:"<";
font-size:50px
}
.slider #slide02:checkedlabel[for=slide03] {label[for=slide03]:before {
right:0;
display:block
}
.slider #slide02:checked
content:">";
font-size:50px
}
.slider #slide03:checked~.slider__content {
-webkit-transform:translate3d(-50%, 0, 0);
transform:translate3d(-50%, 0, 0);
}
.slider #slide03:checkedlabel[for=slide02] {label[for=slide02]:before {
left:0;
display:block
}
.slider #slide03:checked
content:"<";
font-size:50px
}
.slider #slide03:checkedlabel[for=slide04] {label[for=slide04]:before {
right:0;
display:block
}
.slider #slide03:checked
content:">";
font-size:50px
}
.slider #slide04:checked~.slider__content {
-webkit-transform:translate3d(-75%, 0, 0);
transform:translate3d(-75%, 0, 0);
}
.slider #slide04:checkedlabel[for=slide03] {label[for=slide03]:before {
left:0;
display:block
}
.slider #slide04:checked
content:"<";
font-size:50px
}
.slider #slide04:checkedlabel[for=slide05] {label[for=slide05]:before {
right:0;
display:block
}
.slider #slide04:checked
content:">";
font-size:50px
}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/05/06 08:24
退会済みユーザー
2018/05/06 08:33