jQueryを使ったスライドギャラリーは、数多く存在していますがオプションが充実したシンプルなスライドを利用したい時などに使える「FOTORAMA」を使ってみました。
1.FOTORAMAよりデータ一式をダウンロード
2.jQuery本体を読み込みます。
1 |
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> |
3.「fotorama.js」と「fotorama.css」を読み込みます。
1 2 |
<link href="http://fotorama.s3.amazonaws.com/4.4.9/fotorama.css" rel="stylesheet"> <script src="http://fotorama.s3.amazonaws.com/4.4.9/fotorama.js"></script> |
4.HTMLを記述する
1 2 3 4 5 |
<div class="fotorama"> <img src="images/img1.jpg"> <img src="images/img2.jpg"> <img src="images/img3.jpg"> </div> |
fotoramaというクラス名を付けた親要素の中に、スライド表示したい画像を羅列すればOKです。
オプション
- 表示サイズの変更
- サムネイル付き
- フルスクリーン
- 動画
- HTMLテキスト
- 画像調整
- 遷移方法
- キャプション
- ハッシュ付き
- ループ
- 自動遷移
- シャッフル
- キーボード操作遷移
- ナビゲーションの位置変更
- 遷移方向