Warning: Undefined array key 1 in /home/slashd/slashd.com/public_html/blog/wp-content/themes/arkhe_child/functions.php on line 149
ホームページデザインでトップページにスライダーを設置することが定番となりました。
そんなよくあるスライダーなので、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.