JavaScript

とても簡単で軽量なjQueryスライダー「jQuery Slider²」を使ってみる

とても簡単かつ軽量なjQueryのスライダー「jQuery Slider²」を使ってみました。使いやすくて、サクっと実装できます。オプションで幅や高さも指定できますし、スピード、自動スライドも切り替えられ、それなりの機能もつけられるのでいい感じかと思います。以下、サンプルと使い方です。

[ads_center]

使い方

以下のサイトからダウンロードできます。

いつも通り、head内にjQuery本体とプラグインを読み込みます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="jquery.slider.js"></script>
<link href="jquery.slider.css" rel="stylesheet" type="text/css" />

そして、スライダーを指定してあげます。

<script type="text/javascript">
$(function() {
    $('#slider').slider();
});
</script>

HTMLもシンプルにこんな感じで記述していきます。

<div id="slider">
    <div><!-- コンテンツ1 -->
        <p>テキスト・・・</p>
    </div>
    <div><!-- コンテンツ2 -->
        <p>テキスト・・・</p>
    </div>
    <div><!-- コンテンツ3 -->
        <p>テキスト・・・</p>
    </div>
・・・中略・・・
</div>

これ以上ないくらいシンプルですね。あとは各コンテンツにクラスをつけるなりCSSで見栄えを調整してあげればいいかと思います。

オプションは以下のようにして指定できます。

<script type="text/javascript">
$(function() {
    $('#slider').slider({
        autoplay: true,
        showControls: true,
        showProgress: true,
        hoverPause: true,
        wait: 3000,
        fade: 500,
        direction: 'left',
        width: 500,
        height: 300,
        randomize: false,
    });
});
</script>

オプション

autoplay
自動でスライドできます。trueかfalseを指定します。
showControls
trueで前/次のナビゲーションの矢印が表示されます。falseで表示しなくなります。
showProgress
下にある現在位置を示すページナビの表示/非表示を指定できます。trueかfalseを指定します。
hoverPause
マウスオーバーするとスライドを停止させることができます。停止する場合はtrue、しない場合はfalseです。
wait
次のスライドまでの間隔のスピードを指定できます。
fade
スライドアニメーションのスピードを指定できます。
direction
leftかrightを指定できます。デフォルトはleftです。右から左へスライドします。rightを指定すると逆に左から右へスライドします。
width
スライダーの幅です。
height
スライダーの高さです。
randomize
開始するスライドをランダムで表示させます。

大体こんな感じですかね。他にもslidebeforeやslideafterでコールバックを指定することもできます。ということでとても手軽なスライダーなのでオススメです。

以下のスライダーもシンプルで使いやすいのでよろしければこちらもどうぞ。

関連記事

  1. jQuery.appear

    JavaScript

    ビューポート外のコンテンツ表示を防止できる「jQuery.appear」

    jQuery.appearは、元々は非表示となっているものや、ビューポ…

  2. no-image
  3. ScrollTrigger

    JavaScript

    スクロールの位置をベースにしたアニメーション「ScrollTrigger」

    ScrollTriggerはユーザーがスクロールする位置をベースにした…

  4. JavaScript

    クールでお洒落なナビゲーションを簡単に実装できるjQueryプラグイン「Kwicks for jQu…

    クールでお洒落なナビゲーションを簡単に実装することができるjQuery…

  5. PopCircle

コメント

    • 加藤
    • 2012年 7月 28日

    Sinpaku様

    初めまして。加藤と申します。
    いつもためになる記事をありがとうございます。

    このスライダーについてお聞きしたいことがあり、コメントさせて頂きました。

    ページを読み込んでいる間、スライドさせる内容が縦一列に全て表示されてしまうのですが、
    読み込んでいる間は初めの内容のみか、または何も表示させないようにするにはどうすれば良いのでしょうか。

    お忙しい中すいませんが、教えて頂けると助かります。宜しくお願い致します。

    • 加藤さん、はじめまして!
      コメントありがとうございます。記事読んでくれてうれしいです。
      スライド内容が縦に全部表示されるとのことですが、jquery.slider.cssは読み込んでいますか?
      試した限りでは特に縦には表示されませんでした…。
      例えば、CSSで#sliderにdisplay:noneを指定して、スクリプト側でこんな感じにしてみてはどうでしょうか?
      $(function() {
      $(‘#slider’).fadeIn().slider();
      });

    • 加藤
    • 2012年 7月 28日

    Sinpaku様

    お返事ありがとうございます!

    jquery.slider.cssは読み込んでいるのですが、私の環境ではページを開いた瞬間に
    縦にズラリと表示されてしまいました。

    教えて頂いたdisplay:noneを指定する方法で解決しました。助かりました!
    親切にどうもありがとうございました!これからも記事を楽しみにしています。

    • 無事解決されてよかったです!
      こちらこそブログ読んで頂きありがとうございます。
      少しでも役立つ記事が書けるよう、これからも頑張ります!
      今後ともよろしくお願いします。

    • eyecoco
    • 2012年 8月 31日

    Sinpaku様

    初めまして。xpbbsと申します。
    このSliderはBUGありますが、
    画像は一枚しかない時に表示しません。なんか修正する方法あるでしょうか

    お忙しい中すいませんが、宜しくお願い致します。

    • 初めまして。
      xpbbsさん、こんにちは!

      そうですね、試してみたら確かに一枚の時は何も表示されなくなっちゃいますね…
      jquery.slider.cssを読み込んでいるならjquery-slider-elementというクラス名に
      left: 0と記述されているのでこれに !important をつければ一応表示されるようになるかと思います。
      根本的な解決にはなってないかもしれませんが、画像が一枚だけと決まっているのでしたらこちらが簡単で
      いいかなと思います。

    • tamami
    • 2012年 9月 01日

    ありがとうございました。1時間ほどでサイトに設置することができました。今から食事の用意、今夜はさんまの塩焼きです。これからもステキなプラグイン教えてください。

    • こちらこそブログ読んでくれてありがとうございます。
      さんまの塩焼き美味しいですよね。僕もよく食べますよ!
      今後ともよろしくお願いします。

    • jun
    • 2012年 9月 25日

    初めまして!junと申します。
    トップページのスライダーでいいものを探していて、
    たどり着きました。

    早速こちらのスライダーを、
    使わせていただこうと組み込んでみました。

    無事にスライドしてくれるのですが、
    画像の左上と右上に丸い矢印(>>)がありますが、
    (次の画像や、前の画像を表示させるリンク部分)
    この丸い部分がIE8ですと、正方形になってしまいます。
    枠もデザインがきいていない、黒いただの線で、
    なんだかダサい感じなのです。

    同様に画像右下の、3つの黒丸のリンクも、
    四角(■こんな感じです)で表示されています。

    クロームではばっちりなのですが。。。

    試に、
    jquery-1.7.2.min.jsと、
    jquery.slider.min.js、
    jquery.slider.css以外何も読み込ませていないページで
    確認してみましたが、変わりませんでした。

    何か良い方法など思いつかれますでしょうか?

    お手数をおかけしてすみません。

    • junさん初めまして、こんにちは!
      スライダー参考にしてくれてうれしいです。

      スライダーの上部の矢印と下部の黒丸の件ですが、どちらも画像ではなくCSSで実装されています。
      で、IE8で四角になるということはCSS3のborder-radiusやbox-shadowが対応されていないことが原因です。
      なので、IE8でもこれらのプロパティを対応させる必要があるかと思います。
      対応させるツールはCSS3 PIEなどいくつかあると思うのでお好きなものを選んで使ってみてはいかがでしょうか。
      CSS3 PIE → http://css3pie.com/

    • jun
    • 2012年 9月 25日

    素早いご回答、ありがとうございます!
    とても助かります。
    教えていただいたツールを調べて実装してみようと思います。

    上記のCSSの件はこれで解決できそうなんですが、、、

    このスライダーは、IE9で動きますでしょうか?
    実は本物のIE9ではないのですが、
    IETester(http://www.my-debugbar.com/wiki/IETester/HomePage)という
    IEの複数バージョンで確認できるツールでは、
    画像がスライドせずに、
    3つ縦に並んで表示されてしまいました。
    (IE6~8ではOKでした)

    何か良い方法ご存知であれば
    再度お手数をおかけして申し訳ないのですが、
    教えていただけないでしょうか?

    いつもいつもIEでひっかかってしまいます・・・
    IEなんかなくなればいいのに(涙)
    (愚痴です、すみません)

    • 僕もIEの確認はIETesterで試してますよ!
      試した限りではIE9でも問題なく動作しました…。

      IEに対応させるのって本当に大変ですよねw

    • jun
    • 2012年 9月 25日

    ご返答ありがとうございます。

    しかしIE9で動作しましたか・・・
    うーん、僕の環境ではなぜだめなんでしょう。
    もう少し調べてみます。
    解決できたら、また書き込みしますね。
    ありがとうございました!

    • jun
    • 2012年 9月 26日

    こんにちは、junです。
    IE9での対応の件ですが、無事に動作しました!

    IETesterでのie9の確認では、どうしても動作しないため、
    IE自体を8⇒9にアップグレードして確認しました。

    結果、きれいに動作しています。
    お騒がせして、すみませんでした。

    あ、あとPIEも使用したところ、
    ダサイ感じが洗練された見た目になりました。
    ありがとうございました!

    • junさん、こんにちは!
      IE9対応の件、無事動作できてなによりです!
      PIEもうまくいってよかったです!
      こちらこそブログ参考にして頂きありがとうございました。
      今後ともよろしくお願いします。

    • es
    • 2012年 11月 26日

    はじめまして。いつもためになる記事をありがとうございます!

    こちらのスライダーも解説をもとに無事設置することができたのですが、ひとつ教えていただきたいことがあります。

    現在位置を示すナビ、一番端のスライドが表示されている状態でそのナビをクリック (例: 一番右のスライドが表示されている状態で一番右のナビをクリック) すると、ブランクになってしまいます。端のスライドの場合はナビをクリックしてもスライドしないようにはできないでしょうか。

    もし何か対策があれば教えていただけますと幸いです。
    よろしくお願いいたします。

    • esさん、はじめまして。
      記事参考にしていただきありがとうございます!

      確認してみたところ、確かに現在表示されているナビをクリックすると真っ白のページが流れてきますね…。
      現在表示されているナビにはクラス名「jquery-slider-page-current」が自動で付くので、これが付いているクリックイベントを解除したらいいのかなと思い、以下のようにやってみたんですが、ちょっとうまくいきませんでした。泣

      $(‘.jquery-slider-page-current’).unbind(‘click’);
      $(‘.jquery-slider-page’).live(‘click’, function() {
      if($(this).hasClass(‘jquery-slider-page-current’)) {
      $(this).unbind(‘click’);
      }
      });

      途中まではクリックしても動かないようにできるんですが、何回かクリックしていくと動かなくなります。
      お力になれずに申し訳ございません…。

        • es
        • 2012年 12月 03日

        こんにちは。
        お忙しいところ試していただきありがとうございます!
        残念ですが、sinpakuさんのお力でもうまくいかなかったのでしたら諦めがつきました。
        とはいえ、今までどなたも触れていないところをみるとさほど気になるバグでもなさそうですので・・・このまま使わせていただきます。
        ありがとうございました!

          • CSVIY
          • 2013年 10月 22日

          jquery.slider.min.js内の
          _draw();の手前に
          var x1=-1;//仮パラメータです。(初期化です)
          と設定します。
          draw関数にて、x1の設定をします。(_this.nextAll(‘.jquery-slider-element’).length)
          ———–
          var _draw=function(){$this.addClass(‘jquery-slider-sliding’);if(settings.showProgress){x1=_this.nextAll(‘.jquery-slider-element’).length;$this.find(‘.jquery-slider-page’).removeClass(‘jquery-slider-page-current’);$this.find(‘.jquery-slider-page:eq(‘+(_this.nextAll(‘.jquery-slider-element’).length)+’)’).addClass(‘jquery-slider-page-current’);}
          settings.slidebefore(_this,$this);if(settings.direction==’right’){_this.show().css(‘left’,-settings.width);}else{_this.show().css(‘left’,settings.width);}
          _this.stop(true,true).animate({‘left’:(settings.direction==’right’?’+=’:’-=’)+settings.width+’px’},{‘duration’:settings.fade,’complete’:function(){settings.slideafter(_this,$this);$this.removeClass(‘jquery-slider-sliding’);}});if(_last){_last.stop(true,true).animate({‘left’:(settings.direction==’right’?’+=’:’-=’)+settings.width+’px’},{‘duration’:settings.fade});}};
          ———–
          これで、描画された際の位置的な情報はx1に設定されているので、
          この値がshowProgressのアイコンを押されたときに同じか検証をして、
          同じであれば、draw()を呼び出す前に、returnする。異なれば表示中のスライドではないので、再描画する。
          具体的には、clickされた時に、x2にx1と同等の値を設定して、x1とx2を検証する。
          positionEls.prepend($(”).bind(‘click’,function(){if($this.hasClass(‘jquery-slider-sliding’))return;_last=_this;_this=$tmp;var x2=_this.nextAll(‘.jquery-slider-element’).length;if(x1==x2)return;_draw();})

          こんな感じでしたら、動くかと思います。

    • マサ
    • 2012年 12月 19日

    はじめまして。
    スライドショーを探していて、こちらにたどり着き、参考にさせていただきました。
    本当に助かりました。
    ありがとうございます。

    ひとつ質問させていただいてもよろしいでしょうか。

    基本的にはオートプレイ、マウスオーバー時にもスライドするようにしたいのですが、「hoverPause:false」として、スライド中に左右の「prev」「next」ボタンをクリックすると、オートプレイが再開しなくなりました。
    これを再開するようにしたいのですが、何か方法はありますでしょうか。

    jsの中をみても、さっぱり分からなくて思い切ってコメントさせていただきました。

    分かる範囲でかまいませんので、ご教授いただけますと幸いでございます。
    よろしくお願いいたします。

    • マサさん、初めまして!
      記事、参考にしていただきありがとうございます。
      「hoverPause:false」にした状態で「prev」「next」ボタンをクリックしてもオートプレイが再開するようにしたいとのことですが、
      jquery.slider.jsを弄る必要があります。一応確認してみたところ、僕の環境ではjquery.slider.jsの45行目にある以下の部分を
      if (!$this.hasClass(‘jquery-slider-paused’) && settings.autoplay) {
      _timer = setTimeout(_cycle, settings.wait);
      }
      以下のように変更してみたところ、「prev」「next」ボタンをクリックしてもオートプレイが再開されるようになりました。
      if (settings.autoplay) {
      _timer = setTimeout(_cycle, settings.wait);
      }
      ちなみにブラウザはChromeしか確認していませんが…。
      あと、コアの部分を弄るので、公式サイトでアップデートなどがあった場合には変更される可能性がありますのでご了承下さい。

        • マサ
        • 2012年 12月 19日

        sinpakuさん。

        ご返答、ありがとうございます。
        しかも検証までしてくださっただなんて!

        sinpakuさんに教えていただいたとおりに変更してみたところ、見事に希望通りの動作になりました!!
        すごいっす!
        本当にありがとうございます。

        ちなみに、Windows版ですが、IE6、7、8、9、Chrome、Firefox、Safariで問題なく動作しておりました。

        アップデートの件も承知いたしました。

        本当に助かりました。
        快くご返答いただき、感謝しております。
        ありがとうございました!

        • 無事に希望通りの動作になって何よりです。
          こちらこそ記事を参考にしていただきありがとうございました!
          今後ともよろしくお願いいたします。

    • ロデム
    • 2013年 3月 13日

    はじめまして!
    スライドショーを探していて、こちらにたどり着き参考にさせていただきました。
    ありがとうございます。
    1つ教えていただきたいのですが、autoplay: true,の状態で1枚目の画像がスライドしてから入ってきますが、1枚目の画像を静止した状態からスライドさせることができますか?
    よろしくお願い致します。

    • ロデムさん、はじめまして!
      1枚目を静止した状態からのスタートはプラグイン自体をカスタマイズするしかないと思います。

    • tag
    • 2013年 7月 20日

    Sinpaku様

    はじめまして。
    tagと申します。

    簡単なスライダーを探しておりましたが、
    おかげ様で無事設置できました!
    ありがとうございました!

    ただ、1つ質問をさせて頂きたいのですが、、、

    autoplay: false, の設定にしても、

    サイト表示時に
    1枚目の画像がスライドインしてくるのが気になっています。

    最初から静止した状態で表示することはできないでしょうか??

    お忙しいところ大変恐れ入りますが
    ご教示頂けると幸いです。

    どうぞよろしくお願いいたします。

    • tagさんはじめまして。
      オプションで指定できないのでプラグインを弄るしかないですね…
      コード読んでみましたがわかりませんでした。

    • tag
    • 2013年 7月 22日

    hatake様

    お忙しいところ、
    調べて頂き誠にありがとうございました!

    今回は別のスライダーを使用することになりましたが、
    バナー広告などには、
    スライドインしてくるのは効果的なので、
    別の機会で使用してみたいと思います。

    今後のhatakeさんの記事、楽しみにしております。
    どうもありがとうございました。

最近の記事

  1. WH-XB900N
  2. Eufy RoboVac L70 Hybrid
  3. cheero Smart USB Charger 48W CHE-320

アーカイブ

PAGE TOP