レスポンシブかつ軽量な画像スライドショーのjQueryプラグイン-ResponsiveSlides.js

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;
}

Related Article

9 Comments & Tracbacks

  • 高橋 2014-06-06 10:11 PM

    こんにちは。質問ですが、
    ループするのを止めたいのですが、一向に止まりません。animationLoop:false,を指定しても止まりませんでしたが、このプラグインは、元々ループを止めることはできないんでしょうか?

    お分かりになればご教示願います。

    Reply

  • 高橋 2014-06-09 4:03 PM

    saoriさま

    ありがとうございます!素晴らしいの一言です。
    問題なくできました。

    懇切丁寧にご教示頂き、何と感謝したらいいのかわかりません。

    お礼と言っては何ですが、当社のfacebookかツイッターにsaori様のことを紹介してもよろしいでしょうか?

    娯楽目的で立ち上げたものではなく、そのファンのほとんどが経営者の方々ですので、saori様の今後のビジネスの一助となればと思った次第です。
    決して弊社の利益の為の宣伝や利用ではないことを固くお約束します。

    もしくは何かお望みとあれば、出来る範囲で協力させていただきたいとおもっております。
    よろしくお願いします。

    Reply

    • saori 2014-06-09 9:48 PM

      高橋 さま

      いえいえ、無事実装できたようでよかったです。
      好きでやっており自分の勉強にもなっていますので大丈夫ですよ。
      そんな風に仰って頂けるだけで充分です!
      ブログを続ける励みになります、こちらこそありがとうございます!

      Reply

  • Yukiko 2019-02-27 7:34 PM

    saori様
    スライドを最後で止めたいと、いろいろ探してました所、辿り着きました。
    そして無事実装できることができました。
    ありがとうございます!

    Reply

    • saori 2019-03-07 10:58 AM

      お役にたったならうれしいです!コメントありがとうございます!!

      Reply

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル コンテンツ スライドショー jQueryプラグイン php 引っ越し 素材 お知らせ JavaScript Facebook CSS カテゴリー 投稿タイプ IE HTML5 Shareボタン seo レスポンシブ Photoshop タクソノミー ナビゲーション カスタムメニュー Git Macアプリ サイドバー WPセキュリティ SVG iTunes PHPリファレンス API WP使い方 query_posts データベース get_posts() 条件分岐 コメント function RSS スマートフォン Sass/Compass さくらVPS