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>タグをコメントアウトしています)

<div id="slider" class="slider-pro">
            <ul class="sp-slides">
                <li id="img01" class="sp-slide"><!-- <img class="sp-image" src="index/image/image01.jpg" alt="image01"> --></li>
                <li id="img03" class="sp-slide"><!-- <img class="sp-image" src="index/image/image03.jpg" alt="image03"> --></li>
                <li id="img04" class="sp-slide"><!-- <img class="sp-image" src="index/image/image04.jpg" alt="image04"> --></li>
                <li id="img05" class="sp-slide"><!-- <img class="sp-image" src="index/image/image05.jpg" alt="image05"> --></li>
                <li id="img06" class="sp-slide"><!-- <img class="sp-image" src="index/image/image02.jpg" alt="image06"> --></li>
            </ul>
        </div>

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

<script type="text/javascript">
	$(function() {
		//スライダーのレスポンシブ
		var timer = false;
		window.onresize = function(){
			if (timer !== false) {
				clearTimeout(timer);
    		}
			timer = setTimeout(function() {
				if ($(window).width() > 700) {
					maxHeight = 480;
				} else {
					maxHeight = 290;
				}
				$("#slider").css("height",maxHeight+"px");
				$(".sp-mask").css("height",maxHeight+"px");
				$(".sp-slide").css("height",maxHeight+"px");
    			}, 200);
		 };
	});
</script>

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

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

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

by T.Y.

スポンサーリンク