普通のスライダー

サムネイルつきのスライダー

全画面表示切り替えボタンつきスライダー

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/fotorama.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/fotorama.js"></script>
<script>
    $(window).load(function(){
    });
</script>
<p class="title">普通のスライダー</p>
<div class="fotorama">
	<img src="<PATH>/img01.jpg">
	<img src="<PATH>/img02.jpg">
	<img src="<PATH>/img03.jpg">
	<img src="<PATH>/img04.jpg">
	<img src="<PATH>/img05.jpg">
	<img src="<PATH>/img06.jpg">
	<img src="<PATH>/img07.jpg">	
</div>

<p class="title">サムネイルつきのスライダー</p>
<div class="fotorama" data-nav="thumbs" data-height="200" data-width="600" data-loop="true">
	<a href="<PATH>/imgb16.jpg"><img src="<PATH>/imgb16.jpg"></a>
	<a href="<PATH>/imgb17.jpg"><img src="<PATH>/imgb17.jpg"></a>
	<a href="<PATH>/imgb18.jpg"><img src="<PATH>/imgb18.jpg"></a>
	<a href="<PATH>/imgb19.jpg"><img src="<PATH>/imgb19.jpg"></a>
	<a href="<PATH>/imgb20.jpg"><img src="<PATH>/imgb20.jpg"></a>
	<a href="<PATH>/imgb21.jpg"><img src="<PATH>/imgb21.jpg"></a>
	<a href="<PATH>/imgb22.jpg"><img src="<PATH>/imgb22.jpg"></a>
	<a href="<PATH>/imgb23.jpg"><img src="<PATH>/imgb23.jpg"></a>
	<a href="<PATH>/imgb24.jpg"><img src="<PATH>/imgb24.jpg"></a>
	<a href="<PATH>/imgb25.jpg"><img src="<PATH>/imgb25.jpg"></a>
</div>

<p class="title">全画面表示切り替えボタンつきスライダー</p>
<div class="fotorama" data-allowfullscreen="true" data-loop="true">
	<img src="<PATH>/imgd04.jpg">
	<img src="<PATH>/imgd05.jpg">
	<img src="<PATH>/imgd06.jpg">
	<img src="<PATH>/imgd07.jpg">
</div>

FOTORAMAについて

FOTORAMAはフルスクリーンの切り替えができたりするスライダーです。
その他にも標準的なスライド、サムネイル付き、キャプション付きなどオプションで色々なスライダーを設置できます。
APIも参考にして下さい>
【注意】Githubからダウンロードできるプラグインファイルだとなぜか動作しません(2014年6月19日現在)
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンス
対応ブラウザ

関連するjQueryプラグイン

  • AwkwardShowcase

    AwkwardShowcase

    シンプルなスライダーからちょっと豪華なスライダーまで幅広く設定可能

  • SlidesJS

    SlidesJS

    シンプルなスライダー

  • bxSlider

    bxSlider

    とても簡単にスライダーを設置することができ、機能も豊富

  • Pikachoose

    Pikachoose

    サムネイル付きスライダーを簡単に設置できる

  • Fathom

    Fathom

    プレゼン向きのスライダープラグイン