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

カスタマイズ性にも優れた、コンテンツスライダー、カルーセル、画像ギャラリーが実装できるスライダー用のjQueryのプラグインを紹介します。

サイトのキャプチャ

iosSlider

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
	});

});

top of page

©2017 coliss