jQuery：レスポンシブ対応のスライドショー「responsiveslides」

トップページのメインイメージを一定時間で切り替えたい場合、
ちょいと昔ならFLASHの独断場だった気がしますけども、
最近はJQueryさえ使えば、ほぼこれらはクリア出来ます。
「(ブラウザの）Javascript切ってる場合はどうするんだ！」ってそんなもん
noscriptで画像一枚貼りますよ、ええ。
スクリプト切ったブラウザで今時どのサイトを見ようってんでいと
言い切ってももはや大丈夫な昨今、JQuery関連はとっても楽です。

いつもはエフェクトが豊富なjqFancyTransitionsを使ってたのですけども
残念な事にこいつはレスポンシブ対応ではないのですね。
画像サイズを指定してやらないとまともに動いてくれないのです。
対応方法があるはずだ、と海外のフォーラムなどを探し回ってみたけども
情報を見つけることができませんでした。

で、別の物をって事で見つけたのがresponsiveslides。
エフェクトはフェードだけなんですけども、なんといっても設置が楽。

1MB以下という軽さ、そして（もう別にいいんだろうけども）IE6にも対応。

<ul id="slides">
     <li><img src="001.jpg" alt="hoge1" /></li>
     <li><img src="002.jpg" alt="hoge2" /></li>
     <li><img src="003.jpg" alt="hoge3" /></li>
</ul>

という感じでマークアップしておいて

<script>
    $(function() {
      $("#slides").responsiveSlides({
        auto: false,
        //falseでオートスライドをオフにします
        pager: true,
        // true でページャーリンクを表示
        speed: 900,
        maxwidth: 540
      });
    });
</script>

とhead内に書いてあげればOKです。
もちろんJqueryとこの本体スクリプトをhead内でリンクするのを忘れずに。
オプションは以下。

$("#slides").responsiveSlides({
  auto: true,            
  //  trueで自動スライド、falseでページナビなどでスライド
  speed: 900,           
  // スライドアニメーションのスピード
  timeout: 3000,         
  // スライドするまでの時間
  pager: false,          
  // true でページリンクを表示する
  nav: false,            
  // true でページ送りを表示する
  random: false,         
  // true で画像をランダム表示に
  pause: false,          
  // true は画像をマウスオーバー中スライドを止めます
  pauseControls: true,   
  // ページャー等のコントローラーをマウスオーバー中にスライドを止めます。
  prevText: "Prev",  
  // ページ送りリンク（前へ）テキスト
  nextText: "Next",      
  // ページ送りリンク（次へ）テキスト
  maxwidth: "",          
  // スライドショーの最大横幅サイズ（px）
  navContainer: "",      
  // セレクタ指定すると「pager: true」時のページャーのulセットを指定したセレクタへ挿入できる
  manualControls: "",    
  // ページャーのHTMLへ作成しそのセレクタを指定すると、独自ページャーを作成できる
  namespace: "rslides",  
  // スライドに自動で付与されるクラス名を変更
  before: function(){},  
  // 1枚スライドする前にcallback関数
  after: function(){}    
  // 1枚スライドした後のcallback関数
});