Fotoramaは、シンプルで導入が容易なスライダープラグインです。サムネイル付きのスライダーが簡単に設置できます。もちろんサムネイルなしも可能です。
挙動については、以下デモページをご確認いただければと思います。
Fotoramaの導入手順
Fotoramaのダウンロードと設置
まずは公式サイトからファイル一式をダウンロードします。
以下のファイルをサーバー上に設置します。
- fotorama.css
- fotorama.js
- fotorama.png
fotorama.cssとfotorama.pngは同じディレクトリ内に入れます。
CSSファイルの読み込み
設置したCSSファイルを読み込みます。
1 | <link rel="stylesheet" href="fotorama.css"> |
<head>～</head>内に追加してください。
jQuery本体とJSファイルの読み込み
続いて、jQuery本体とJSファイルを読み込みます。
1 2 | <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script><script src="fotorama.js"></script> |
記述する場所は、</body>の直前でOKです。
スライドのマークアップ
最後にスライド画像をマークアップしたら完了です。
01 02 03 04 05 06 07 08 09 10 11 12 | <div class="fotorama"> <img src="images/01.jpg" alt=""> <img src="images/02.jpg" alt=""> <img src="images/03.jpg" alt=""> <img src="images/04.jpg" alt=""> <img src="images/05.jpg" alt=""> <img src="images/06.jpg" alt=""> <img src="images/07.jpg" alt=""> <img src="images/08.jpg" alt=""> <img src="images/09.jpg" alt=""> <img src="images/10.jpg" alt=""></div> |
上記の場合はシンプルなスライドになりますが、オプションを追加することで、横幅を変更したりサムネイルを表示したりすることができます。
Fotoramaのオプション
Fotoramaには様々なオプションが用意されています。以下のように属性を追加することで、オプションを指定できます。
01 02 03 04 05 06 07 08 09 10 11 12 13 | <div class="fotorama"data-width="100%"data-ratio="800/500"data-transition="crossfade"data-autoplay="1000"data-transitionduration="1000"data-arrows="false"data-swipe="false"data-trackpad="false"data-loop="true"data-nav="thumbs"data-fit="cover"> |
| data-width | 横幅 |
| data-ratio | 縦横比 |
| data-transition | アニメーションの種類 |
| data-transitionduration | アニメーションの時間 |
| data-autoplay | 自動実行 |
| data-arrows | 矢印の有無 |
| data-swipe | スワイプによるスライド |
| data-trackpad | トラックパッドへの対応 |
| data-loop | ループ |
| data-nav | ナビゲーション |
| data-fit | 画像のフィット |
詳しくは、Customizeページをご参照ください。
あとがき
マークアップもシンプルで簡単に導入できますね。スライダープラグインで迷ったら、ぜひ導入をご検討ください。