[JS]これはかなりの優れもの！iOS用だけどIE7にも対応しているスライダーのスクリプト -iosSlider

サイト構築 -JavaScript

Post on:2012年7月20日

iosSliderの特徴

ハードウェアアクセラレイト

iOS, Android, Webkit系ブラウザ用にCSS3を使用します。
レスポンシブデザイン

デスクトップ、スマートフォン、タブレットの各デバイスをサポート。
コールバック

ウェブアプリとしてさまざまな用途に応えるためにコールバックを用意。
全てのモダンブラウザをサポート

デスクトップ用のFirefox, Chrome, Safari, IE7+をサポート。
無限ループ

スライドは両方向に無限ループさせることもできます。
オートスライディング

自動スライドにも対応、ホバーで中断します。

サポートブラウザ

iosSliderがサポートするテスト済みのブラウザ一覧です。

Firefox5.0+
Chrome19.0+
Safari5.0+
IE7+
iOS Safari4.0+
Android2.3+

※Androidは一部の機能のみサポート

iosSliderのデモ

デモは画像をテキストがスライドするコンテンツスライダーで、デスクトップでもタッチデバイスでも快適に動作します。

デスクトップはドラッグ操作でもスライドできます、もちろんIE7も。

デモページ

タッチデバイスでは、画像をそのままスライドできます。

iosSliderの使い方

外部ファイル

「jquery.js」と当スクリプトをhead内に記述します。

<script type = 'text/javascript' src = '/iosSlider/jquery-1.7.min.js'></script>
<script type = 'text/javascript' src = '/iosSlider/jquery.iosslider.js'></script>

HTML

各スライドはdiv要素で実装し、それをdiv要素で内包します。

<!-- slider container -->
<div class = 'iosSlider'>

	<!-- slider -->
	<div class = 'slider'>
	
		<!-- slides -->
		<div class = 'slide'>...</div>
		<div class = 'slide'>...</div>
		<div class = 'slide'>...</div>
	
	</div>

</div>

CSS

ベースとなるスタイルシートです。
これをベースにデザインをカスタマイズすることもできます。

/* slider container */
.iosSlider {
	/* required */
	position: relative;
	top: 0;
	left: 0;
	overflow: hidden;
	
	width: <slider width>px;
	height: <slider height>px;
}

/* slider */
.iosSlider .slider {
	/* required */
	width: 100%;
	height: 100%;
}

/* slide */
.iosSlider .slider .slide {
	/* required */
	float: left;

	width: <slide width>px;
	height: <slide height>px;
}

JavaScript

jQueryのセレクタでラッパーのdiv要素を指定し、スクリプトを実行します。

$(document).ready(function() {
	$('.iosSlider').iosSlider();
});

スクリプトのオプション

スクリプトのオプションでは、スライドのタイミングだけでなく、デスクトップでドラッグ操作を可能にしたり、スクロールバーのデザインをカスタマイズすることができます。
オプションを使用すると、スクリプトは下記のようになります。

$(document).ready(function() {

	$('.iosSlider').iosSlider({
		snapToChildren: true,
		scrollbar: true,
		scrollbarHide: false,
		desktopClickDrag: true,
		scrollbarLocation: 'bottom',
		scrollbarHeight: '6px',
		scrollbarBackground: 'url(_img/some-img.png) repeat 0 0',
		scrollbarBorder: '1px solid #000',
		scrollbarMargin: '0 30px 16px 30px',
		scrollbarOpacity: '0.75',
		onSlideChange: changeSlideIdentifier
	});

});