[JS]1ページで構成されたサイトに豊富なコンテンツをスライドで表示するスクリプト -Slideme

サイト構築 -JavaScript

Post on:2013年10月10日

Slidemeの特徴とデモ

デスクトップ・スマフォ・タブレットのレスポンシブ対応
フルスクリーンに対応
CSS3アニメーション（IE7互換）
実装が簡単
カスタマイズも可能
マルチインスタンス

ページの随所にこのSlidemeが使用されており、まずはドキュメントで使用されている動作を見てみます。

ドキュメント

下部のナビゲーションでスライドを操作します。

一枚目をスライド

スライダーは入れ子にも対応しています。
下部のナビゲーションに注目。

2番目には3つのスライダーが入れ子に

入れ子をスライドしてみます。

入れ子のスライドを表示

もちろん、入れ子の途中で親のスライダーを進めることもできます。

親のスライドを表示

バグレポートもこのSlidemeを使っており、とってもおしゃれｗ

バグレポート

「Report Now」をクリックすると、スライドしてフォームが表示されます。

バグレポートのフォーム

Slidemeの使い方

Step 1: 外部ファイル

jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/slideme.js"></script>
<link rel="stylesheet" href="css/slideme.css" type="text/css" media="all"/>

Step 2: HTML

スライドはol, ulなどリスト要素で各パネルを実装します。
リストのclassに「slideme」を与えます。

<!-- Any DOM: ul/ol > li, div, section, etc... -->
<div id="foo">
    <ul class="slideme"> <!-- Class "slideme" is mandatatory! -->
        <li><img src="img/one.jpg" alt="One"/></li>
        <li><img src="img/two.jpg" alt="Two"/></li>
        <li><img src="img/three.jpg" alt="Three"/></li>
        <li><img src="img/four.jpg" alt="Four"/></li>   
    </ul>
</div>

Step 3: CSS

レスポンシブではない場合は、スタイルシートで幅と高さをセットします。

#foo .slideme {
	width: 550px;
	height: 430px;
}

Step 4: JavaScript

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

$(document).ready(function() {
	$('#foo').slideme();
}

オプション

オプションではページネーションやアローの有無、CSS3の使用、スピードやエフェクトの種類を設定できます。

$('#foo').slideme({
	arrows: false,  // arrows
	autoslide: false,   // auto slide
	css3: true,   // CSS3 animation
	labels: {   // label
		next: 'next',
		prev: 'prev'
	},
	loop: false,   // loop
	pagination: 'numbers',   // pagination
	speed: 1000,   // speed
	transition: 'page'   // transition
});