Download

SlideChan（GitHub）

Demo

SlideChanの利用イメージをご紹介します。

Principal Benefit

SlideChanは、埋め込み型のシンプルなスライドショーです。次のような特長があります。

• レスポンシブデザインを採用し、カラム幅に合わせて拡大・縮小。
• 色々なサイトになじむ、シンプルなデザイン。
• 画像プリロード＆ローディング表示機能でちょっぴりリッチ。
• ナビゲーションパーツをオリジナルデザインにカスタマイズ可能。
• 同じページ内に複数設置可能。
• 各ブラウザに対応。（Chrome, Firefox, Safari, IE7+）

How to use?

SlideChanの基本の使い方をご紹介します。

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- SlideChan Javascript file -->
<script type="text/javascript" src="jquery.slidechan.js"></script>
<!-- SlideChan CSS file -->
<link rel="stylesheet" href="jquery.slidechan.css">

<div id="slideChan">
	<div class="slideChan-frame"><img src="demo/img/1.jpg"></div>
	<div class="slideChan-frame"><img src="demo/img/2.jpg"></div>
	<div class="slideChan-frame"><img src="demo/img/3.jpg"></div>
	<div class="slideChan-frame"><img src="demo/img/4.jpg"></div>
 	<div class="slideChan-frame"><img src="demo/img/5.jpg"></div>
</div><!-- /slideChan -->

<script type="text/javascript">
$(function(){
	$('#slideChan').slideChan();
});
</script>

Options

SlideChanのオプション項目は次のとおりです。何も指定しなかった場合は、次のパラメータがセットされます。

<script type="text/javascript">
$(function(){
	$('#slideChan').slideChan({
		slideSpeed: 500,
		autoLoop: true,
		loopTime: 8000,
		contentsSlideShowMode: false,
		frameSelector: '.slideChan-frame',
		naviPrevSelector: '',
		naviNextSelector: '',
		naviButtonUse: true,
		naviButtonSelector: '',
		naviButtonPosition: 'inner'
	});
});
</script>

slideSpeed: 数値

スライドが切り替わる時間を設定します。

autoLoop: true or false

スライドショーの自動再生機能を有効にします。

loopTime: 数値

autoLoopが有効な時、スライドが次のスライドに切り替わるまでの時間を設定します。

contentsSlideShowMode: true or false

画像やテキストを含むような、コンテントスライドショーモードに切り替えます。

frameSelector: 'クラス名'

スライド1枚分のブロックにあたるクラス名を変更します。

naviPrevSelector: 'ID名'

デフォルトの前・次に進むボタンを無効にし、「前に戻る」機能を指定のID要素に付加します。

naviNextSelector: 'ID名'

デフォルトの前・次に進むボタンを無効にし、「次に進む」機能を指定のID要素に付加します。

naviButtonUse: true or false

スライド番号切り替えボタンを無効・非表示にします。

naviButtonSelector: 'ID名'

デフォルトのスライド番号切り替えボタンを無効にし、「スライド番号切り替え」機能を指定のID要素に付加します。
カスタムスライド番号切り替えボタンは<ul>タグで作成し、<li>の中に0からカウントした切り替え先のスライド番号を設定します。
この例の場合、「#custom-naviButton」をオプションパラメータに設定します。

<ul id="custom-naviButton">
	<li>0</li>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

naviButtonPosition: 'inner' or 'outer'

デフォルトのスライド番号切り替えボタンの表示位置（スライド内 or スライド外）を切り替えます。

♥ Share

• Tweet
•