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>

Follow me!