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

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

タブレットで画面を縦・横切り替えると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>

調べていて発見したことは、bxSliderにはリロード処理が用意されていたことです。
画面サイズが変化するごとに、bxSliderを呼び出しすると、重複起動になり表示がおかしくなります。

そこで、パラメータだけを読み直すリロード処理を行うのです。
それがこの部部分です。

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

reloadSlider に、パラメータを指定するとパラメータのリロードを行ってくれます。

ウィンドウサイズが変形しても、その都度リロードされるため、柔軟なレスポンシブ対応をすることが可能となります。

また一つ良い経験をいたしました。

今回のレポートは以上です。
読んでいただいてありがとうございました。


Twitterでもweb集客向上、webマーケティング等についてブログの内容以外の情報発信もさせていただいております。Twitterもご覧いただければ幸いです。


ホームページに関するお悩み事やご相談事がございましたら私どもまでご連絡ください。
微力ではございますが、鋭意ご対応申し上げます。

ホームページのご提案もさせていただいております