bxSliderでレスポンス時の画像の位相ずれ、タイミングずれを直す

2018年2月9日

bxSliderをスライドで使用し、レスポンシブに盛り込む場合は、特に何もしなくても対応してくれます。
ただ、妙な現象が発生し、対処したので忘備録として残します。

今回の内容

1. タブレットで画面を縦・横切り替えるとbxSliderの挙動がおかしくなった
2. レスポンシブに合わせてパラメータを自動で変更する

タブレットで画面を縦・横切り替えるとbxSliderの挙動がおかしくなった

bxSliderの確認をしていたところ、ウィンドウの横幅が変わると挙動がおかしくなる現象が出ました。具体的にはページャーと、表示されている画像がずれており、また途中で先頭に巻き戻る現象です。

その状態で、ブラウザの再読み込みを行ってもやはり挙動がおかしい。
何か変だなと思って調べてみました。

パラメータ指定なしのデフォルト設定では問題なし
原因を特定する

ちなみにソースは以下の通りです。

<script>
$(document).ready(function()
{
$(‘#slide ul’).bxSlider({
speed: 1000,
pause: 4000,
infiniteLoop: true,
slideWidth: 1000,
minSlides: 1,
maxSlides: 3,
moveSlides: 1,
slideMargin: 20
});

});
</script>

<div id=”slide”>
<ul>
<li><img src=”sample01.jpg”></li>
<li><img src=”sample02.jpg”></li>
<li><img src=”sample03.jpg”></li>
<li><img src=”sample04.jpg”></li>
<li><img src=”sample05.jpg”></li>
</ul>
</div>

試しに、パラメータ設定をなしにしてみたところ、位相ずれは発生しなくなりました。
ということは、パラメータの中に位相ずれを引き起こすものがあるということです。

一つ一つパラメータを設定してゆき、原因となるパラメータを見つけました。
「maxSlides: 3」と、「slideMargin: 20」でした。

ちなみにこれらのパラメータを「maxSlides: 1」、「slideMargin: 0」とすると現象は発生しませんでした。

どうやら原因は、スマホ表示等で画面サイズが縮まった際に、「実質サイズ」と「パラメータで指定したサイズ」にずれが発生したときに、挙動がおかしくなっていました。

レスポンシブに合わせてパラメータを自動で変更する

原因が特定できたので、今度は対処です。
要はレスポンシブに合わせて、上記2つのパラメータを自動で切り替えればよいのです。

そこで、いろいろググって調べ、関数を使ってパラメータを切り替える方法を用いました。
また、スマホ・タブレットの縦・横切り替え、ブラウザの横幅変更に対応するためウィンドウのリサイズ処理も盛り込みました。

そのソースが以下になります。

<script>
$(document).ready(function()
{
var slide = $(‘#slide ul’).bxSlider(slide_call());

$(window).resize(function() {slide.reloadSlider(slide_call());});

function slide_call(slide_opsion)
{
var slide_option =
{
speed: 1000,
pause: 4000,
infiniteLoop: true,
slideWidth: 1000,
minSlides: 1,
maxSlides: 3,
moveSlides: 1,
slideMargin: 20
}

if (window.innerWidth < 960) /* タブレット以下 ? */
{
/** モバイル版の処理 */
slide_option[‘maxSlides’] = 1;
slide_option[‘slideMargin’] = 0;
}
else
{
/** PC版の処理 */
slide_option[‘maxSlides’] = 3;
slide_option[‘slideMargin’] = 20;
}

return slide_option;
}
});
</script>

<div id=”slide”>
<ul>
<li><img src=”sample01.jpg”></li>
<li><img src=”sample02.jpg”></li>
<li><img src=”sample03.jpg”></li>
<li><img src=”sample04.jpg”></li>
<li><img src=”sample05.jpg”></li>
</ul>
</div>