マリンロードスタッフブログをご覧いただいている皆様、こんにちは。
フロントエンドエンジニアの虎澤です。

bxsliderを使ってスライダーを実装するフロントエンドの方は多いと思いますが、
先日タイトルにもある不具合が生じました。

結論からいうと、$(document).ready();の中に書いてしまうせいで起きるバグのようです。
バグと言っていいのか謎なところですが。。
要はスライダーが完全に読み込まれる前に実行してしまうから、一番最後のスライド画像が先頭にきてしまうようです。

解決方法としては、

と書けばOK。

bxsliderは前後のスライドも表示させたい時に使ったりします。
これを覚えておかないとページを開いた時綺麗に左右のスライダが表示されないので、ぜひ覚えておいてくださいね。

$(document).ready();に書くのか$(window).on(‘load’);に書くのかの違いが重要なものは他にもまだまだあります。
matchHeightもよく利用するのですが、これも$(document).ready();だと完全に読み込まれる前に実行してしまうため、期待通りに動いてくれません。

jsが苦手だったりまだあまり触れたことがない人は、下記のように当然思うと思います。
「$(document).ready();と$(window).on(‘load’);ってどう違うの？」

これ私も最初曖昧でした。
ですので、簡単に違いをご説明しますね。

非常にざっくりですが。。
要するに、$(document).ready();が先に実行され、その後に$(window).on(‘load’);が実行されるわけですね。

jsは参考サイトなどのものをコピペして使うことも多く、自ら勉強しないとなかなか知識がつかない言語だと思います。
上記のものは多用こそすれ、その違いをよくわかっていなかったりしますよね。
基礎の部分ではありますが、こういうところからしっかり固めていくのが重要だと思います。
今後も精進ですね。

以上、虎澤でした。