jQueryスライダー『bxSlider』で最後のスライドが最初に表示されてしまう問題を解決する

2019.09.27 コーディング

ウェブサイトへお手軽にスライダーを設置できるjQueryスライダー『bxSlider』。

しかし、最後のスライドとして設定した画像が一番最初に表示されてしまう（サイトを開いたときに最初から表示されている）ケースがあります。

今回はこれを解消する方法のメモ。

『bxSlider』で最後のスライドが最初に表示されてしまう問題を解決する

bxSliderの公式サイトで紹介されているサンプルソースは以下のような感じです。

jQuery

$(function(){
	$('.bxslider').bxSlider({
		mode: 'fade',
		captions: true,
		slideWidth: 600
	});
});

これを下記のように変更します（変わったのは1行目のみ）。

jQuery

$(window).on('load', function(){
	$('.bxslider').bxSlider({
		mode: 'fade',
		captions: true,
		slideWidth: 600
	});
});

変更前の

$(function(){～});

という書き方は

$(document).ready(function(){～});

の省略形で、DOMが読み込まれた直後に実行されます。

対して、

$(window).on('load', function(){～});

という書き方だと、画像などすべてのデータを読み込んだ直後に実行されます。

変更前のソースの場合、スライドとして表示する画像のすべてを読み込む前に実行されることが原因で、本来最後になるはずの画像が最初に来てしまっています。

それを、Webページのデータすべてを読み込んだ直後に実行するようにしたことで、意図通りの表示にすることができます。

ちなみに、loadメソッドはjQueryバージョン3以降では非推奨となっています。

$(window).load(function(){～});

という書き方では、「jQuery.3.X.X」などのバージョン3以降のjQueryを読み込んだ場合では動かないこともあるので注意してください。