bxSliderのランダム表示について

JQueryスライドショー「bxSlider」のオプションにrandomStartを使って最初に表示させる画像をランダムにしたいのですがうまくいきません。
４枚の画像を２枚ずつカルーセルで表示し、更新するたびに最初に表示される画像をランダムに変えたいのですが、特定の画像ばかり多く表示されます。表示される確率を均一にしたい場合はどうしたらいいでしょうか？

---jQuery-------------------
$(document).ready(function(){
$('#slider3').bxSlider({
auto: true,
randomStart: true,
touchEnabled: false,
pause: 4000,
speed: 500,
minSlides: 2,//最低限表示させる数
maxSlides: 2,//一度に表示させる数
moveSlides: 2,//スライドで動かす数
slideWidth: 180,
slideMargin: 2
});
});
---HTML -------------------
<ul id="slider3" class="slider">
<li class="slide1"><a href="◯" target="_blank" class="thumb"><img src="../img/◯/◯.jpg" alt="◯"></a></li>
<li class="slide2"><a href="◯" target="_blank" class="thumb"><img src="../img/◯/◯.jpg" alt="◯"></a></li>
<li class="slide3"><a href="◯" target="_blank" class="thumb"><img src="../img/◯/◯" alt="◯"></a></li>
<li class="slide4"><a href="◯" target="_blank" class="thumb"><img src="../img/◯/◯.gif" alt="◯"></a></li>
</ul>

記入しているソースは以上です。
class="slide3"と class="slide4"の画像組み合わせが10回更新中８回ぐらいでます。
最初に表示される画像の確率を同じにする場合はどうしたらいいのでしょうか？
どうぞよろしくお願いします。

No.3 ベストアンサー 回答者： fujillin 回答日時： 2016/02/25 10:21

#1、2です。

ちょっと時間ができたので、試してみました。
確かに、なんかおかしいですね。

少しテストしてみましたが、#1のようにstartSlideを指定しても同様の事象がおきるようです。
表示されているslide番号を取得してみると、こちらがslideのインデックスのつもりのものがpagerのインデックスとして解釈されているようです。
勝手な想像では、1枚表示のスライダーを想定していて、複数枚表示のケースを考慮し忘れている様にも見受けられます。
（1枚表示の場合は、pagerとslideのインデックスは一致するので正常になる）

randomStartの内部処理では、予想通りslide数のインデックスをランダムに発生しているようですが、表示処理の中でこれがpagerのインデックスとして使われてしまっているようです。（未確認）
それなので、ご質問のケースではslide番号0では（slide1、slide2）が表示され、1～3では（slide3、slide4）が表示されてしまうようです。
しかも、2、3の場合は対応するpageがないので、位置の表示（濃くなる）がされないものと思われます。
（全部の処理を追いかけてはいないので、半分は想像ですが・・・）

この結果として、slide番号はランダムに発生しているものの、page0が25%、page1が75%の割合で表示されることになってしまうようで、ご質問の内容と割合もほぼ符号しますね。
・・・ということで、多分、作者さんが複数枚表示の場合をうっかりしたのではないかと考えたのですが・・・
作者の以下のサンプルをよく見ると、7枚目のslideを表示するのにstartSlide：2の指定をしていますので、pagerの指定であることは意図的なようにも見受けられます。
（説明でslideとpageを使い分けているので、それならオプション項目名をstartPageとでもしておくべきだと思いますが・・・）
http://bxslider.com/examples/carousel-demystifie …


それはそれとして、とりあえずの対処方法としては・・・
1）#1の方法で、startSlideにpagerのインデックス（ご質問のケースでは 0 or 1 )を指定する。
2）randomStartの処理で発生する番号を表示枚数で除して、pagerのインデックスに相当するようにしておく。
などが考えられます。

全体を解読してはいないので、少々いい加減ですが、2）の方法としては142行目あたりの
　Math.random() * slider.children.length
　　　　　↓　↓　↓
　Math.random() * slider.children.length / slider.settings.maxSlides
とする感じです。
ちょっと小手先の調整なので、根本的に修正するほうが好ましいですが、ライブラリ全部を読解しないとならないので・・・
まぁ、上記1）の方法（＝#1の回答の方法）の方が、安全と言えば安全かも。

この回答へのお礼

お礼が遅くなってしまいすみません。
丁寧な回答ありがとうございます。

お礼日時：2016/04/04 14:52

No.2 回答者： fujillin 回答日時： 2016/02/23 17:41

#1です。

＞２つともの丸が薄いままの時があります。２つとも薄い時が多く
ページャーは表示位置を示しているはずなので、全てが薄いというのはおかしくありませんか？
サンプルのデモで見る限り、きちんと位置を示すように機能している様に見えますが・・・
http://bxslider.com/examples/carousel-demystified
http://bxslider.com/examples/carousel-dynamic-nu …

どこかで矛盾した初期設定になっているようなことはないでしょうか？
（あるいは、まさかとは思いますがバグなのか・・・）

No.1 回答者： fujillin 回答日時： 2016/02/22 10:10

bxSliderの内部を確認してはいませんが、想像では普通に乱数を利用して初期値を決めているのだと思いますので、ご質問の結果はたまたまの偶然ではないのでしょうか？

どうしてもライブラリの制御がお気に召さないようであれば、スタート画像を指定するオプションもあるようですのでそちらを利用することにして、ご自分で初期表示の画像を決めて指定すれば宜しいのではないでしょうか？

自分で発生させるのであれば、ランダムに限らず、好みの比率で発生させるようなことも可能です。

var rateGenerator = function(ratio){
　var i, rdm, sum = 0, r = [], n = ratio.length;
　for(i = 0; i < n; i++){ sum += ratio[i]; r[i] = sum; }
　rdm = Math.random() * sum;
　for(i = 0; i < n; i++) if(rdm < r[i]) break;
　return i;
}

//0～3を5：4：3：2の比率で発生させる
var r = rateGenerator([ 50, 40 , 30, 20 ]);

この回答へのお礼

回答ありがとうございます。

画像下にあるページャーの丸が２つならんでいるのですが、左右どちらかが濃い丸になる時と、２つともの丸が薄いままの時があります。２つとも薄い時が多く、その時はclass="slide3"と class="slide4"の組み合わせが表示されるのですが、何か関係があると思われますか？

お礼日時：2016/02/23 16:11