レスポンシブかつ軽量な画像スライドショーの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部分

 <link href="style.css" rel="stylesheet" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="responsiveslides.js"></script>
<script>
    $(function() {
      $("#slides").responsiveSlides({
        maxwidth: 700,
        fade: 2000,
    	speed: 3000
      });
    });
</script>
 

サンプルのbody部分

<body>
<div id="container">
<h1>responsiveSlides | memocarilogdemo</h1>
    <div id="slides">
      <img src="images/photos1.png" alt="" />
      <img src="images/photos2.png" alt="" />
      <img src="images/photos3.png" alt="" />
      <img src="images/photos4.png" alt"" />
    </div>
</div>
<p><a href="">元のページへ戻る</a></p>
</body>
 

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

* {
  margin: 0;
  padding: 0;
}
#container{
	width:100%;
	padding-top: 10px;
	}
h1,p{
  min-width: 400px;
	width: 100%;
	padding:20px 0;
	color: #ccc;
	text-align: center;
}
a{
	color: #333;
}
#slides{
	margin: 0 auto;
}

Related Article

7 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

Leave a Comment

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


*


Categorys

Tags

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