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>