こんにちは、マークアップのmikaです。
今日は、スラダーをCSSだけで実装する方法をご紹介しようと思います。

CSSでは「ある状態にあるとき」の表示を設定します。
例えば、通常の状態（何もしない状態、これがほとんど）、マウスを乗っけた状態（:hover）、すでに訪問した状態（:visited）…などなどです。

スライダーは、クリックしたら次のものが表示されるという動きです。
この場合の「クリックしたら」は、「クリックした状態」ではなく、「クリックした後に」という状況です。「クリックした状態」って一瞬ですよね。:active（クリックした状態）なんかでもいいのでは？とも思うでしょうけど、マウス操作で押して、離した途端に:activeじゃなくなっちゃうと不具合が起きます。

じゃぁ、どうするか。ラジオボタンを使います。ラジオボタンで「チェックされている」という状態を使ってスライダーを実現します。実際に見てみましょう。

▼できあがりサンプル

Step.1

まずは、スライダーの外枠部分をつくります。その中に画像の枚数分、ラジオボタンをつくりま～す。ラジオボタンにはそれぞれidをつけておきます。

<div class="slider">
<input type="radio" name="radio_slider" id="radio_slider1" value="1" checked>
<input type="radio" name="radio_slider" id="radio_slider2" value="2">
<input type="radio" name="radio_slider" id="radio_slider3" value="3">
<input type="radio" name="radio_slider" id="radio_slider4" value="4">
</div>

Step2.

中身を入れるdiv用意して、その中にスライダーの中身を並べます。
サンプルでは、4つの画像を中身として使っています。

<div class="slider">
…
<div class="inner_slider">
<img src="ete1.png" class="img1">
<img src="ete2.png" class="img2">
<img src="ete3.png" class="img3">
<img src="ete4.png" class="img4">
</div>
</div>

Step3.

中身にラジオボタンのlabelをつけてあげます。このときに、自分をクリックしたら、次のラジオボタンがチェックされるように、1つ後ろのラジオボタンのラベルをつけます。最後の中身は、クリックしたら最初に戻るように1つ目のラジオボタンのラベルにしましょう。これでhtmlは完成！

<div class="inner_slider">
<label for="radio_slider2"><img src="ete1.png" class="img1"></label>
<label for="radio_slider3"><img src="ete2.png" class="img2"></label>
<label for="radio_slider4"><img src="ete3.png" class="img3"></label>
<label for="radio_slider1"><img src="ete4.png" class="img4"></label>
</div>

Step4.

それでは、CSSを書いていきましょう。
外枠のdivは、中身1個分サイズに指定しましょう。
余計なものが見えちゃいけないので、overflow: hiddenにします。
さらに、ラジオボタンそのものは必要ないので隠しちゃいます。

.slider {
width: 200px;
height: 150px;
overflow: hidden;
}
input[type=radio] {
display: none;
}

Step5.

スライダーの中身を、absoluteで等間隔にしましょう。

.inner_slider {
position: relative;
}.img1 {
position: absolute;
left: 0;
top: 0;
}
.img2 {
position: absolute;
left: 200px;
top: 0;
}
/* .img3、.img4も同じように… */

Step6.

最後に、各ラジオボタンがcheckedのときのinner_sliderの位置を指定します。

.inner_slider {
position: relative;
width: 800px;
left: 0;
top: 0;
transition: all .3s ease-in-out;
}
#radio_slider1:checked ~ .inner_slider {
transform: translateX(0);
}
#radio_slider2:checked ~ .inner_slider {
transform: translateX(-200px);
}
/* .img3、.img4も同じように… */

（サンプルソースでは、ベンダープリフィックスは省略しています。）

どうでしたか？
いつもはJavascritpで実装されている方が多いと思いますが、CSSでもできるんですよ！<(｀^´)>ｷﾘﾘｯ!
JSが出来ない方もいらっしゃると思いますし、その度に苦しんだり、そのためだけにできる人にお願いするのは心苦しいですもんね(´・ω・｀)

マークアップのみなさん、是非、チャレンジしてみてください。