ハナモゲラボ / 試行錯誤の実験人生

日々、PCや各種デバイス、楽器等に翻弄されながら電脳の森をさまよう男の日常と様々な実験をさらりと記しております。

jQuery:レスポンシブ対応のスライドショー「responsiveslides」

June 17 2014

トップページのメインイメージを一定時間で切り替えたい場合、
ちょいと昔ならFLASHの独断場だった気がしますけども、
最近はJQueryさえ使えば、ほぼこれらはクリア出来ます。
「(ブラウザの)Javascript切ってる場合はどうするんだ!」ってそんなもん
noscriptで画像一枚貼りますよ、ええ。
スクリプト切ったブラウザで今時どのサイトを見ようってんでいと
言い切ってももはや大丈夫な昨今、JQuery関連はとっても楽です。

いつもはエフェクトが豊富なjqFancyTransitionsを使ってたのですけども
残念な事にこいつはレスポンシブ対応ではないのですね。
画像サイズを指定してやらないとまともに動いてくれないのです。
対応方法があるはずだ、と海外のフォーラムなどを探し回ってみたけども
情報を見つけることができませんでした。

で、別の物をって事で見つけたのがresponsiveslides
エフェクトはフェードだけなんですけども、なんといっても設置が楽。

[browsershot url=”http://responsiveslides.com/” width=”530″]

1MB以下という軽さ、そして(もう別にいいんだろうけども)IE6にも対応。

<ul id="slides">
     <li><img src="001.jpg" alt="hoge1" /></li>
     <li><img src="002.jpg" alt="hoge2" /></li>
     <li><img src="003.jpg" alt="hoge3" /></li>
</ul>

という感じでマークアップしておいて

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

とhead内に書いてあげればOKです。
もちろんJqueryとこの本体スクリプトをhead内でリンクするのを忘れずに。
オプションは以下。

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

他にもここ(co-jin.net様)にたくさんまとめてあります。
http://co-jin.net/web/jquery-image-and-content-slider-plugins

今回はこれを使いましたが、エフェクトが多彩なものもあれば使ってみたいです。

| Posted in Javascript | Comments (0)

Post a Comment

※メールアドレス、URLは任意入力です。メールアドレスは入力しても公開されません。

« Nov 2017 December 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31