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

JavaScript無し(*1)で、スタイルシートで実装するResponsiveデザイン対応のコンテンツスライダーを紹介します。

*1
スライダーの基本機能ではJavaScriptを使用していませんが、iOSに対応させるために使用。
サイトのキャプチャ

Responsive CSS3 Slider Without Javascript

デモ

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

ベスト
  • Firefox
フルサポート
  • Chrome, Firefox, Opera, Safari
    ※各ブラウザの最新版
一部非対応
  • IE9
    ※スライダーの機能は対応しますが、アニメーションに未対応。

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

デモのキャプチャ

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

デモのキャプチャ

デモ:タブレットサイズ

デモのキャプチャ

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

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

デモのキャプチャ

デモ:幅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%; }

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

JavaScript

iOSだけlabelのクリックを正しく処理できないため、下記のスクリプトを使用しています。

スクリプト無し版は、下記で確認できます。

サイトのキャプチャ

Responsive CSS3 Slider -no JavaScript版

top of page

©2017 coliss