事象
Minute Maidの模写を行っているのですが、Insta画像のランダム再生の箇所で躓いています。
現状、Cycleプラグインを使って画像をランダム再生をさせています。
・質問1. オプションでランダム再生の設定をしているが、ランダムにならない
・質問2. 実際のサイトの様に4エリアでランダムに画像を切り替える方法がわからない
質問2に関しては切り替えるタイミングを各エリアで変えることも考えましたが、
1つのエリアで2回連続で切り替わっていたり、4つのうち必ず1エリアしか切り替わっていなかったりと、
切り替えタイミングだけでは解決できない動きをしていて解決方法がわかりません。
下記にソースコードを記載します。
ランダムではありませんがスライドショーは動いているので、
コードの書き方やJSの読み込み方法は合っていると思います。
また、Cycle以外の方法で実際のサイトの様にランダム再生ができる方法がありましたら教えてください。
Minute Maid ↓
https://www.minutemaid.com/
よろしくお願いいたします。
ソースコード
HTML
1<div class="random"> 2 <img src="insta-img/a.jpg" alt=""> 3 <img src="insta-img/b.jpg" alt=""> 4 <img src="insta-img/c.jpg" alt=""> 5 <img src="insta-img/d.jpg" alt=""> 6 <img src="insta-img/e.jpg" alt=""> 7 <img src="insta-img/f.jpg" alt=""> 8 <img src="insta-img/g.jpg" alt=""> 9 <img src="insta-img/h.jpg" alt=""> 10 <img src="insta-img/i.jpg" alt=""> 11 <img src="insta-img/j.jpg" alt=""> 12</div>
JS
1$(function() { 2 $('.random').cycle({ 3 random: 1, 4 }); 5 });