memocarilog

ResponsiveSlides.jsは、レスポンシブで792KBの軽量かつシンプルなスライドショーのjQueryプラグインです。Internet Explorer 6,7,8,9 にも対応していて、サポートしているブラウザも幅広いので、定番として使えそうです。

「サンプル」も作ってみましたが、設置も簡単にできました。シンプルなマークアップで使いやすいです。

デモ

ResponsiveSlides.js · Responsive jQuery slideshow

Slideshow 1 はシンプルに画像がフェードしながら切り替わります。
Slideshow 2 は画像の切り替えをページナビで行います。

ダウンロード

viljamis/ResponsiveSlides.js – GitHub

デモのファイルの一緒にダウンロードできます。

使い方

HTMLは下記のようにリストでシンプルにマークアップします。

 <ul id="slides">
     <li><img src="1.jpg" alt="" /></li>
     <li><img src="2.jpg" alt="" /></li>
     <li><img src="3.jpg" alt="" /></li>
</ul>

次にhead内でjQuery本体とプラグインを読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>

続けてhead内で下記のように記入します。

Slideshow 1の場合

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

Slideshow 2 の場合

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

オプション

オプションは、アニメーションスピードなど以下のようなものが用意されています。

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

追記：WordPress で使ったときのエラーメモ

WordPressでこのプラグインを使った場合に、auto:true で　speed: が 3000 以上の場合にスライドが動かなくなる事がありました。timeout: を設定して speed: に設定しているスピード以上にしたら解決しました。
例えば以下のような形です。

jQuery(function() {
      jQuery("#slides").responsiveSlides({
        auto: true, 
        timeout: 6000,
        speed: 5000 
      });
 });

作ってみたサンプル

作ってみたサンプルのデモ→「responsiveSlides｜memocarilogdemo 」

サンプルのhead部分

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="js/responsiveslides.js"></script>
<script>
$(function() {
  $("#slides").responsiveSlides();
});
</script>

サンプルのHTML部分

<ul id="slides">
  <li><img src="images/p01.jpg"></li>
  <li><img src="images/p02.jpg"></li>
  <li><img src="images/p03.jpg"></li>
  <li><img src="images/p04.jpg"></li>
</ul>

サンプルのcss部分
（画像の部分はセンター寄せしただけです。）

.content{
  overflow: hidden;
  height: 350px;
}
p{
  text-align: center;
}
#slides{
  margin: 0 auto;
  width: 400px;
}