bxsliderで最後のスライドが最初に来てしまうバグ

Question

bxsliderで最後のスライダーが最初に表示されてしまいます。
また、3つ表示で、1つずつスライドの設定にしているのに
最初は必ず3つ（最後から3つ）が一気にスライドしてしまいます。

下記のサイトを参考に書き換えてみたのですが、直りませんでした。

＜参考サイト＞
最後のスライダー画像が最初に表示されてしまう！そんな時に考えられる要因と対処方法３つ！

最初に記述していたjsは下記です。

$(function(){
		var slider = $('#bxSlider01 ul').bxSlider();

		function sliderSetting(){
			var windowWidth = jQuery(window).width();
			var width = windowWidth / 1.4;
			if(width > 768){
				slider.reloadSlider({
					speed: 3000,
					slideMargin: 35,
					pause: 5000,
					pager: true, /*ページ送りを追加するかどうかの設定*/
					controls: false, /*前後のコントロールを追加するかどうかの設定。*/
					auto: true, /*自動スライドの設定*/
					minSlider: 3,
					maxSlides: 3,
					moveSlides: 1, /*一度のスライド時に移動するスライド数*/
					autoHover: true,
					slideWidth: 310
				});
			} else {
				slider.reloadSlider({
					speed: 1000,
					pager: true, /*ページ送りを追加するかどうかの設定*/
					controls: true, /*前後のコントロールを追加するかどうかの設定。*/
					auto: false, /*自動スライドの設定*/
					minSlider: 1,
					maxSlides: 1,
					moveSlides: 1, /*一度のスライド時に移動するスライド数*/
					slideWidth: width
				});
			}
		}
		// 初期表示時の実行
		sliderSetting();
		// リサイズ時の実行
		$(window).resize( function() {
			sliderSetting();
		});
});/*function閉じ*/

参考サイトを元に記述したjsは下記です。

$(window).on('load', function(){
		var slider = $('#bxSlider01 ul').bxSlider();
		var pauseTime = 5000;
	
		function sliderSetting(){
			var windowWidth = jQuery(window).width();
			var width = windowWidth / 1.4;
			if(width > 768){
				slider.reloadSlider({
					startSlide: 0,
					speed: 3000,
					slideMargin: 35,
					pager: true, /*ページ送りを追加するかどうかの設定*/
					controls: false, /*前後のコントロールを追加するかどうかの設定。*/
					auto: false, /*自動スライドの設定*/
					minSlider: 3,
					maxSlides: 3,
					moveSlides: 1, /*一度のスライド時に移動するスライド数*/
					autoHover: true,
					slideWidth: 310,
					autoControls: false,
					pause: pauseTime
				});
				setTimeout(function(){
					slider.goToSlide(1);
					slider.startAuto();
				},pauseTime);
			} else {
				slider.reloadSlider({
					speed: 1000,
					pager: true, /*ページ送りを追加するかどうかの設定*/
					controls: true, /*前後のコントロールを追加するかどうかの設定。*/
					auto: false, /*自動スライドの設定*/
					minSlider: 1,
					maxSlides: 1,
					moveSlides: 1, /*一度のスライド時に移動するスライド数*/
					slideWidth: width
				});
			}
		}
		// 初期表示時の実行
		sliderSetting();
		// リサイズ時の実行
		$(window).resize( function() {
			sliderSetting();
		});
});/*function閉じ*/

参考サイトに記載の
・ど定番の対処法
・最初だけautoをfalseにしておく
・最終手段
の3点とも試してみたのですが、変化有りませんでした。

ご教示いただければ幸いです。
よろしくお願いいたします。

Answer 1

var slider = $('#bxSlider01 ul').bxSlider(); と記述しており、
デフォルトオプションで実行しています。

3つ表示で、1つずつスライドの設定にしているのに

リロード時はそうかもしれませんが、初回実行時は、まったく設定していません。

オプション設定を初回実行時にも適用してはどうでしょう？

$(function(){

  const getBxSliderOptions = () => {
    let width = $(window).width() / 1.4;
    return (width > 768) 
      ? { /* ommited */ } 
      : { /* omitted */ }
  }

  // 初期表示時の実行
  let $slider = $('#bxSlider01 ul').bxSlider( getBxSliderOptions() );

  // リサイズ時の実行
  $(window).resize( function() {
    $slider.reloadSlider( getBxSliderOptions() );
  });

});

Comments

[mmngchip]

コメントありがとうございます。

下記のようにしてみたのですが、特に変わりませんでした。
貴重なご意見をいただきありがとうございました。

```html
$(window).on('load', function(){
const getBxSliderOptions = () => {
let width = $(window).width() / 1.4;
return (width > 768) ? {
speed: 3000,
slideMargin: 35,
pause: 5000,
pager: true, /*ページ送りを追加するかどうかの設定*/
controls: false, /*前後のコントロールを追加するかどうかの設定。*/
auto: true, /*自動スライドの設定*/
minSlider: 3,
maxSlides: 3,
moveSlides: 1, /*一度のスライド時に移動するスライド数*/
autoHover: true,
slideWidth: 310
} : {
speed: 1000,
pager: true, /*ページ送りを追加するかどうかの設定*/
controls: true, /*前後のコントロールを追加するかどうかの設定。*/
auto: false, /*自動スライドの設定*/
minSlider: 1,
maxSlides: 1,
moveSlides: 1, /*一度のスライド時に移動するスライド数*/
slideWidth: width
}
}
// 初期表示時の実行
let $slider = $('#bxSlider01 ul').bxSlider( getBxSliderOptions() );
// リサイズ時の実行
$(window).resize( function() {
$slider.reloadSlider( getBxSliderOptions() );
});
});/*function閉じ*/
```

[AkitoshiManabe]

分岐実装前に立ち戻り、オプションの挙動を十分に確認してはどうでしょうか。minSlider, maxSlider など、異なる値が設定されているものの、コメントしてないものは特にそう思います。
また、GitHub経由で提供されているものですから、１）ソースを読む。２）バグの箇所を見つける。３）バグはイシューとして報告する。が、利用者の取るべき本来の行動です。

Answer 2

bxsliderの元のソースをいじっていたことが原因でした。
戻しましたら、問題なく動きました。