
JQueryスライドショー「bxSlider」のオプションにrandomStartを使って最初に表示させる画像をランダムにしたいのですがうまくいきません。
4枚の画像を2枚ずつカルーセルで表示し、更新するたびに最初に表示される画像をランダムに変えたいのですが、特定の画像ばかり多く表示されます。表示される確率を均一にしたい場合はどうしたらいいでしょうか?
---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回更新中8回ぐらいでます。
最初に表示される画像の確率を同じにする場合はどうしたらいいのでしょうか?
どうぞよろしくお願いします。
No.3ベストアンサー
- 回答日時:
#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の回答の方法)の方が、安全と言えば安全かも。
No.2
- 回答日時:
#1です。
>2つともの丸が薄いままの時があります。2つとも薄い時が多く
ページャーは表示位置を示しているはずなので、全てが薄いというのはおかしくありませんか?
サンプルのデモで見る限り、きちんと位置を示すように機能している様に見えますが・・・
http://bxslider.com/examples/carousel-demystified
http://bxslider.com/examples/carousel-dynamic-nu …
どこかで矛盾した初期設定になっているようなことはないでしょうか?
(あるいは、まさかとは思いますがバグなのか・・・)
No.1
- 回答日時:
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 ]);
回答ありがとうございます。
画像下にあるページャーの丸が2つならんでいるのですが、左右どちらかが濃い丸になる時と、2つともの丸が薄いままの時があります。2つとも薄い時が多く、その時はclass="slide3"と class="slide4"の組み合わせが表示されるのですが、何か関係があると思われますか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- Perl RSSにdiv,ul classを付けたいのですがどのようにつけるのかわからないです 2 2022/03/28 01:53
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- PHP 共通の処理をまとめる方法がわからないのでアドバイスお願いします。 1 2022/12/19 20:20
- HTML・CSS htmlについて質問です! 写真のように写真の部分が?になってしまいます。 ファイルもしっかり選べて 1 2023/07/09 21:17
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jcarouselliteについてです。
-
ジャバスクリプトでクリックし...
-
画像をフェードアウト&フェー...
-
数ある中からランダムで抽出し...
-
bxSliderのランダム表示について
-
横並びの画像を3枚時間差でフェ...
-
楽天APIのデータをjqueryのgetJ...
-
順番にクラスをつけていく方法
-
Javascriptで画像のフェードイン
-
画像メニューの開閉
-
複数のランダム表示について
-
javascript cssの値を取得、変更
-
キャラクターがぴょこんと飛び...
-
jQueryのroundaboutで画像挿入...
-
Dreamweaver上とデバイスプレビ...
-
マウスオーバーで画像の切替で...
-
テキストにマウスオーバーで画...
-
吹き出しに画像とコメントを入...
-
クリックとダブルクリック
-
lightbox 誤作動 JAVA
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
【jQuery】2分割レイアウトで、...
-
横並びの画像を3枚時間差でフェ...
-
画像をフェードアウト&フェー...
-
liの数によってulの横幅を動的...
-
キャラクターがぴょこんと飛び...
-
CSSでマウスオーバーした画像を...
-
ローカルでは問題なく動くがサ...
-
同一ページ内の複数のタグに同...
-
順番にクラスをつけていく方法
-
画像メニューの開閉
-
折り畳みメニューを使った場合...
-
bxSliderのランダム表示について
-
Javaスクリプトで要素の表示・...
-
アコーディオンメニューが開い...
-
Firefoxとクロームでフェードイ...
-
画像の重なり順について
-
一定時間ごとに画像を切り替え...
-
[jQuery]bxSlider 一番最後と...
-
【jQuery】スライダーについて
おすすめ情報