jQuery スライダー fotorama

読み込み

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/X.X.X/jquery.min.js"></script>
<script type="text/javascript" src="./js/fotorama.js"></script>
<link rel="stylesheet" href="./css/fotorama.css" />

設定

<div class="fotorama"
　　オプション1=～
　　オプション2=～
　　オプション3=～>
　　<img src="./images/1.jpg">
　　<img src="./images/2.jpg">
</div>

画像でない要素もスライド可能
<div class="fotorama">
　　<div>～</div>
　　<div>～</div>
　　<div>～</div>
</div>

オプション

<div class="fotorama"
　　幅
　　data-width="800&quot
　　
　　高さ
　　data-height="600">
　　
　　サムネイル表示
　　data-nav="thumbs"
　　
　　全画面表示
　　data-allowfullscreen="true"
　　
　　フェード表示
　　data-transition="crossfade"
　　
　　ループ再生
　　data-loop="true"
　　
　　自動再生
　　data-autoplay="true"
　　
　　矢印表示
　　data-arrows="true"
　　
　　クリック移動
　　data-click="true"
　　
　　スワイプ移動
　　data-swipe="true"
　　
　<img src="./images/1.jpg">
　<img src="./images/2.jpg">
</div>


幅を自動調整
<div class="fotorama" >
　<img src="./images/1.jpg">
　<img src="./images/2.jpg" data-fit="cover">
</div>


画像にキャプションを表示
<div class="fotorama">
　<img src="./images/1.jpg" data-caption="One">
　<img src="./images/2.jpg" data-caption="Two">
</div>