jQuery

jQueryプラグイン「Slider Pro」スライド領域の高さをフルレスポンシブに対応させる

更新日:

ホームページデザインでトップページにスライダーを設置することが定番となりました。
そんなよくあるスライダーなので、jQueryプラグインもたくさんあります。

私は「Slider Pro」をよく使っています。

この「Slider Pro」は必要な機能はほぼサポートしています。
機能について以下のブログでよくまとめてあります。

万能スライダー Slider Pro の使い方 | Gimmick log
万能スライダー Slider Pro の使い方 | Gimmick log

Slider Proは多様なオプションで痒いところに手が届くスライダーです。一番ありがたいのは、CSSなどを調整しなくて ...

ここから機能概要を転載しておきます。

  • レスポンシブ対応
  • タッチデバイス対応
  • Retina用画像の出し分け対応
  • IE8以上で動作
  • キャプションのアニメーション表示対応
  • 縦カルーセル、横カルーセル対応
  • 画面サイズによってレイアウト変更可能
  • MITライセンス

出典 万能スライダー Slider Pro の使い方(Gimmick log)

スポンサーリンク

フルレスポンシブで高さも変更する

様々なスライダーがjQueryプラグインで提供されていますが、PCとスマホでスライダーの高さが変わるような場合は少し工夫が必要になります。

……

「Slider Pro」のスライド部分のHTMLが以下のように設置しています。
通常は<img>タグを設置しますが、以下の場合はCSSで各イメージを設置しています。(<img>タグをコメントアウトしています)

このように設置されたスライダーの高さを変更する必要がある場合は、以下のjQueryを追加します。

ブレイクポイントを700として、PCでは480、スマホでは290が高さとなります。

「Slider Pro」の3つの要素「#slider」「.sp-mask」「.sp-slide」をリサイズ時に設定することで、高さの変更にも対応出来るようになります。

これで、「Slider Pro」のレスポンシブ対応は完璧になるはずです。

by T.Y.

-jQuery

Copyright© Slashd inc. BLOG , 2019 All Rights Reserved.