レスポンシブ対応スライドショーjQuery「ResponsiveSlides」の設定方法

スマホの利用者が増加する中、ウェブ制作はスマートフォンを無視できません。
利用者の多いiphoneはフラッシュ非対応だけにスライドショーは押さえておきたいところです。

スライドショーの中でも軽量でブラウザーもIE6～と幅広くサポートしている
jQueryプラグイン「ResponsiveSlides」の設定方法です。

シンプルなスライドショーですので多機能ではありませんが、その分軽くて設定も簡単。

ResponsiveSlides.js

ダウンロードはこちら：
viljamis/ResponsiveSlides.js

実際に使うのはこのファイルだけです。
responsiveslides.min.js
responsiveslides.css

head(ヘッド)内の設定１：jQueryとプラグイン、スタルシート(responsiveslides.css)を呼び込む。

<link rel="stylesheet" href="responsiveslides.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>

head(ヘッド)内の設定２：スライドショーのフックアップの設定。

<script>
    jQuery(function() {
      $("#slides").responsiveSlides({
        maxwidth: 800
      });
    });
</script>

一つの画像の表示時間(timeout)や画像と画像の切り替わる時間：フェード(speed)の速度を変えたい場合。

<script>
    jQuery(function() {
      $("#slides").responsiveSlides({
	timeout: 9000,
	speed: 1500, 
        maxwidth: 800
      });
    });
</script>


WoordPressへ組み込んだがうまく動かなかったために以下のように修正。
修正後は問題なく表示されます。
なお、WPではspeed:3000以上にすると動かなくなる症状がありますので
ご注意ください。正直、視覚てきにも3000以上にする必要もないです。

<script>
  $(function() {
    $(".rslides").responsiveSlides({
	timeout: 9000,
	speed: 1500, 
	maxwidth: 800
    });
  });
</script>

Add Markup：body部に表示させたい画像を下記のように記入し設定します。
（　img要素にa要素でリンクも出来ます。　）

<ul class="rslides">
  <li><img src="1.jpg" alt=""></li>
  <li><img src="2.jpg" alt=""></li>
  <li><img src="3.jpg" alt=""></li>
</ul>

以上で設定は完了ですが、以下のようなオプション設定が可能ですのでお好みでカスタマイズしましょう。

$(".rslides").responsiveSlides({
  auto: true,             // Boolean: Animate automatically, true or false
  speed: 500,            // Integer: Speed of the transition, in milliseconds
  timeout: 4000,          // Integer: Time between slide transitions, in milliseconds
  pager: false,           // Boolean: Show pager, true or false
  nav: false,             // Boolean: Show navigation, true or false
  random: false,          // Boolean: Randomize the order of the slides, true or false
  pause: false,           // Boolean: Pause on hover, true or false
  pauseControls: true,    // Boolean: Pause when hovering controls, true or false
  prevText: "Previous",   // String: Text for the "previous" button
  nextText: "Next",       // String: Text for the "next" button
  maxwidth: "",           // Integer: Max-width of the slideshow, in pixels
  navContainer: "",       // Selector: Where controls should be appended to, default is after the 'ul'
  manualControls: "",     // Selector: Declare custom pager navigation
  namespace: "rslides",   // String: Change the default namespace used
  before: function(){},   // Function: Before callback
  after: function(){}     // Function: After callback
});