0
目的はCSSだけを使用してスライダーを作成することです。 この試みでは、「3セクション」（色分けされた）を持つ200pxの1500px画像を使用してみました。 デフォルトでは、ラジオボタンは画像の最初の500ピクセル（スライド1）を示します。オーバーフローが隠された200x500ピクセルです。 'slide2'のラベルを使ってラジオボタンをチェックすると、画像を次の500pxにすることができます（スライド2）。 これは当分の間うまく動作します。 私が持っている問題は、画像を-1000pxにスライドさせて、画像の最終500pxを表示することです（スライド3）。 3番目のラジオ入力とラベルを追加すると、スライダーが壊れて、他の入力は何もしません。実際、第1ラジオボタンcssは時には無意味に見えます。なぜなら、「スライド1」ラジオボタンに望ましい効果を得るには、画像そのものへのトランジションを設定する必要があるように見えるからです。画像へCSS：ラジオによる画像のスライド：チェック（純粋なCSSスライダー）
HTML：
<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css"/>
</head>
<body>
<div id="wrap">
<input type="radio" id="slide1" name="radio" checked>
<input type="radio" id="slide2" name="radio">
<!--<input type="radio" id="slide3" name="radio">-->
<img src="images/slides.jpg"/>
<label for="slide1">slide1</label>
<label for="slide2">slide2</label>
<!--<label for="slide3">slide3</label>-->
</div>
</body>
</html>
CSS：
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#wrap {
width: 500px;
height: 200px;
background: #000;
color: #fff;
position: relative;
/*overflow: hidden;*/
}
img {
position: absolute;
top: 20;
left: 0;
transition: .5s ease-out;
height: 200px;
width: 1500px;
}
input[type="radio"] {
display: none;
}
#slide1:checked + img {
left: 0;
transition: .5s ease-out;
}
#slide2:checked + img {
left: -500px;
transition: .5s ease-out;
}
/*#slide3:checked + img {
left: -1500px;
transition: .5s ease-out;
}*/
は助けに感謝します！そして、単にCSSでコントロールを持つスライダを行う簡単で簡単な方法があるなら、私は知りたいと思う。私がオンラインで見つけたいくつかの例を試してみましたが、私がどのようにしてほしいかをかなり見たり動かしたりすることはありません。
素晴らしい作品というあなたに、マイケルをありがとうございました。クイック質問：前の画像をスライドさせる前に、どのように遅延を設定するのですか？それで、新しい画像が重なっているように見えますか？どうもありがとうございました！ – 3412127
@ 3412127 np。あなたはCSSだけでそれをすることはできません。あなたはjavascriptを使う必要があります。あなたは、CSSを使ってこのようなものを構築しようとすることができるものには、実際には限られています。 –
@ 3412127 btwようこそ。投稿を募集し、あなたの問題を検索し、回答が良いこの投稿を見つけ、いつでも回答を受け入れることを誰にも知らせるなら、投稿をアップアップするようにしてください（回答のチェックマーク） –