HOME > >

jQuery slider

画像のスライドではなく要素のスライドなのでコンテンツのカスタマイズがやりやすい。 (imageの中には何も入れられないけどdivの中にはなんでも入れられる的な)

MIT Licenseでソースも小さくわかりやすいので、オプションでダメならソースをいじることもできそうな感じ。

使い方

jQuery本体とjquery.slider.min.js、jquery.slider.cssが必要となります。

HTML

  1.  
  2. <link href="jquery.slider.css" rel="stylesheet" type="text/css" />
  3.  
  4. <script type="text/javascript" src="jquery.min.js"></script>
  5. <script type="text/javascript" src="jquery.slider.min.js"></script>
  6.  

サンプル

スライドさせたい要素の親要素に対してslider()を実行します。

実行結果

画像 1

画像 2

画像 3

画像 4

画像 5

Javascript

  1. // .jquery-sliderの直接の子要素が
  2. // スライドの対象となる。
  3. $('.jquery-slider').slider();
  4.  
  5. // このページの設定
  6. $('.jquery-slider').css({width: 640, height: 320})
  7. .find('h3').css({ padding: 40, fontSize: 40, color: '#FFFFFF' })
  8. .find('a.button').css({ background: '#FFFFFF' });

HTML

  1. <div class="jquery-slider">
  2.     <div style="background-image: url(/storage/library/jquery_slider/img_1.jpg);">
  3.         <h3>画像 1</h3>
  4.     </div>
  5.  
  6.     <div style="background-image: url(/storage/library/jquery_slider/img_2.jpg);">
  7.         <h3>画像 2</h3>
  8.     </div>
  9.  
  10.     <div style="background-image: url(/storage/library/jquery_slider/img_3.jpg);">
  11.         <h3>画像 3</h3>
  12.     </div>
  13.  
  14.     <div style="background-image: url(/storage/library/jquery_slider/img_4.jpg);">
  15.         <h3>画像 4</h3>
  16.     </div>
  17.  
  18.     <div style="background-image: url(/storage/library/jquery_slider/img_5.jpg);">
  19.         <h3>画像 5</h3>
  20.     </div>
  21. </div>
  22.  

オプション

key type default detail
autoplay boolean true 自動でスライドさせる場合はtrue
諸事情によりここではfalse固定
showControls boolean true trueの場合、上部左右に矢印が表示される
showProgress boolean true 右下にドットで
hoverPause boolean true autoplayがtrueでこれもtrueの場合、
マウスオーバーで切り替えが一時停止する。
wait integer 4000 autoplayがtrueの場合、
現在要素が表示されるの時間。
ミリ秒単位で指定。
fade integer 750 スライドにかかる時間。
ミリ秒単位で指定。
direction left|right left スライドの方向
randomize boolean false ランダムに要素を切り替える場合、true
rewind function void スライドが一周して先頭に戻った時に実行される
trueの場合以下を実行
function() { alert('rewind'); }
slidebefore function void スライド開始直前に実行される関数
trueの場合以下を実行
function() { alert('before'); }
slideafter function void スライド完了後に実行される関数
trueの場合以下を実行
function() { alert('after'); }