[CSS]スタイルシートでここまでできる！Responsiveデザイン対応のスライダー -Responsive CSS3 Slider

サイト構築 -CSS

Post on:2012年4月4日

デモ

デモはCSS3に対応した下記のブラウザでご覧ください。

ベスト

Firefox

フルサポート

Chrome, Firefox, Opera, Safari
※各ブラウザの最新版

一部非対応

IE9
※スライダーの機能は対応しますが、アニメーションに未対応。

デモでは左右のアローと下のボタンで各パネルがアニメーションでスライドします。
※ウインドウサイズを変更するのが面倒な人用に、上部にサイズ切り替えボタンがあります。

デモ：デスクトップサイズ

デモ：タブレットサイズ

デモ：スマートフォンサイズ

[ad#ad-2]

表示サイズを実際に変更しても、スライダーは最適な状態に変更されます。

デモ：幅800pxで表示

実装

HTML

各パネルはarticle要素内に配置し、div要素で内包します。
前後にあるラジオボタンは、スライダーのコントロールに使用します。

<!-- Slider Setup -->
<input checked type=radio name=slider id=slide1 />
<input type=radio name=slider id=slide2 />
<input type=radio name=slider id=slide3 />
<input type=radio name=slider id=slide4 />
<input type=radio name=slider id=slide5 />

<!-- The Slider -->
<div id=slides>
	<div id=overflow>
		<div class=inner>

			<article>
				<div class=info><h3>Cloud Dragon</h3> by <a href="http://voyager3.tumblr.com">Brendan Zabarauskas</a></div>
				<img src=CouldDragonByBjzaba.png />
			</article>

			<article>
				<div class=info><h3>Mountain Fort</h3> by <a href="http://voyager3.tumblr.com">Brendan Zabarauskas</a></div>
				<img src=MountainFortByBjzaba.png />
			</article>

			...

		</div>
	</div>
</div>

<!-- Controls and Active Slide Display -->
<div id=controls>
	<label for=slide1></label>
	<label for=slide2></label>
	<label for=slide3></label>
	<label for=slide4></label>
	<label for=slide5></label>
</div>

<div id=active>
	<label for=slide1></label>
	<label for=slide2></label>
	<label for=slide3></label>
	<label for=slide4></label>
	<label for=slide5></label>
</div>

CSS

スタイルシートは長いので、ポイントだけ。

各パネルを表示する仕組みはラジオボタンを使用しています。
各パネルに対応したボタンがチェックされると、マージンを変更してパネルを表示します。

#slide1:checked ~ #slides .inner { margin-left:0; }
#slide2:checked ~ #slides .inner { margin-left:-100%; }
#slide3:checked ~ #slides .inner { margin-left:-200%; }
#slide4:checked ~ #slides .inner { margin-left:-300%; }
#slide5:checked ~ #slides .inner { margin-left:-400%; }

全スタイルシートは、下記のスタイルシートをご覧ください。