jQuery FlexSliderのカルーセル表示を一定方向に進めたい

画像がランダムに変わるカルーセル表示のスライダーを作りたくて、FlexSliderを使ってホームページを作っています。

今は、５枚の画像を２枚ずつ自動でスライドさせ、なおかつ画像がランダムに変わるように設定しています。
ほぼ希望通りなのですが、1点だけ変更したい点があります。

５枚の画像を2枚ずつ自動でスライドさせると、
①②→③④→④⑤と画像がスライドし、④⑤まで行くと左の③④を一瞬通って①②に戻ります。
「右へ行って左へ戻る」これを、
①②→③④→⑤①→②③のように「一定方向に進む」ようにしたいのですが、FlexSliderではできないのでしょうか。

自分なりに調べてみたのですが、わからず困っています。

「slick」を使うと希望通り一定方向に進むカルーセル表示のスライダーができるような気もするのですが、こちらだと画像をランダムに切り替える設定がわかりません。

⑴「FlexSlider」のカルーセル表示で一定方向に画像がずーっと進む方法
⑵「slick」で画像をランダムに切り替える方法
⑶その他以下が実現できるjQueryプラグインがあれば
・カルーセル表示ができる
・自動でスライドする
・一定方向に進む
・画像がランダムに切り替わる
・レスポンシブにも対応している（これは最悪なくても構いません）

⑴〜⑶どれでもかまいません。良い方法があれば教えていただきたいです。
勉強不足で申し訳ありません。どうぞよろしくお願いします。

現在記述しているコードです。
—————————————————
$(window).load(function() {
$('.flex0').flexslider({
animation: "slide",
touch: true,
randomize: true,
directionNav: false,
controlNav: false,
　itemWidth: 190,
move: 2,
minItems: 2,
itemMargin: 2,
slideshowSpeed: 7000,
animationSpeed: 500,
maxItems: 2
});
});
—————————————————

No.1 ベストアンサー 回答者： fujillin 回答日時： 2016/07/19 12:58

こんにちは

両方とも良く知りませんが・・・

（1）FlexSliderってこれのことでしょうか？
http://flexslider.woothemes.com/basic-carousel.h …

探してみたけれど、ドキュメンテーションが見当たりませんね。
おまけにトップから行こうとしてもどう行けばいいのかわからない・・・（汗）
sliderらしきものはWooSliderになっちゃうのだけれど。
上記のデモで、animationLoopなる設定があるので、これを設定してあげればよさそうに思いましたが・・・
カルーセルと同時だと効かないとの記事がありました。
http://sho-tem.com/archives/354/2

どうしても、FlexSliderを利用なさりたいというのであれば、ライブラリの内容を解析して修正するしかなさそうですが、それなりの手間がかかりますね。


（2）画像をランダムに切り替える方法
スライドの途中で順番が変わるという意味ではないですよね？
表示する毎に順序が変わっていれば良いという意味として解釈しました。

それで良いのであれば、（3）でも同じだと思いますが、お好みのスライダを利用することにして、その初期設定の前に画像をシャッフルしておけば済むことと思います。
多分、画像はある要素内にまとめて並べられていると思いますので、一番最初にそれをランダムに並べ替えてしまうという案です。素のスクリプトでもたいした手間にはならないでしょう。
この方法であれば、ライブラリに関係なく適用できるはずですので、お好きなライブラリを利用することができるという次第です。

No.2 回答者： fujillin 回答日時： 2016/07/19 17:16

ANo1です。

時間がちょっとだけとれたので、画像のsrc属性をシャッフルして入れ替える、ごく簡単な例を作成してみました。
　・ id="hoge"要素内にある画像をシャッフルします
　・最近のブラウザなら動作すると思います

var imgs = document.querySelectorAll("#hoge img");
var srcs = [], n = imgs.length, rnd = Math.random;

for(i = 0; i<n;) srcs.push([rnd(), imgs[i++].src]);
srcs.sort();
for(i = 0; i<n;) imgs[i].src = srcs[i++][1];

この回答へのお礼

fujillinさん

下手な説明なのに、的確に回答していただきありがとうございます！
教えていただいたように、ライブラリ設定の前に、画像シャッフル設定を追加することで解決できました。
本当に助かりました。ありがとうございます。

お礼日時：2016/07/20 17:03