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

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

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

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

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

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

  • レスポンシブ対応
  • タッチデバイス対応
  • 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.

スポンサーリンク

関連記事

  1. jQueryプラグイン「Vegas」の動画設定について

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

制作実績一覧

おすすめ記事

最近の記事

– このブログを書いてる人 –

 

 

山本 朝次/Yamamoto Tomotsugu

 

クリエイティブディレクター

 

はじめまして。よろしくおねがいします。

 

柴犬が大好きです。

 

プロフィールはFacebookで。

 

Facebook

 
 
 

PAGE TOP