【bxslider】最後のスライダーが最初に表示されてしまう【バグ解消】

御徒町のとんかつ屋が好きで週５で通っています。
とむです。

「bxslider」というスライダーを簡単に実装できるjqueryプラグインがあるのですが、safariで動かした際に最後のスライダーが最初に表示されてしまう。。。
という謎なバグを発見してしまい頭を抱えていたのですが、解決したので共有します。
※公式のデモ画像でも同様のバグが起こっていました。

このバグですが、ネット上で情報を調べた所結講有名なバグらしく、

$(window).load(function(){
$(‘.bxslider’).bxSlider();
})

の様にスクリプトを書いたり、autoスライドをオフにしたりすると解消されるような事が書かれていたのですが、、、
一向に解決しないのでbxsliderのコードを無理やり修正して解消させました。

バグの原因

safariだとスライダー読み込み時にスライド１枚辺りの横幅を取得できていない為、それが原因で一番後ろのスライドが表示されているっぽいです。
なので最初の読み込み時に無理やり横幅を指定するコードをスクリプト内にいれてやれば解決しそうです。

バグの解消

修正対象ファイル

jquery.bxslider.js

修正箇所１

112行目に
「var imgWidth = el.width();」
を追記。
※
var windowWidth = $(window).width();
var windowHeight = $(window).height();
というコードの下に。

修正箇所２

「if (slider.settings.mode == ‘horizontal’) setPositionProperty(-position.left, ‘reset’, 0);」
を 「if (slider.settings.mode == ‘horizontal’) setPositionProperty(-imgWidth, ‘reset’, 0);」
に修正。

これで、意図した動きになりました。
もし同様のバグで悩んでいる人がいたら試してみてください。