画像の順番がランダムに表示されるスライドショーを作りたい

像の順番がランダムに表示されるスライドショーを作りたい

画像がランダムに表示されるスライドショーを作ろうと、
jQueryのプラグイン「FlexSlider 2」でスライドを作りました。

オプションで
・randomize・・・ランダムでスライドショーをさせる場合は「true」で設定します。
を設定したのですが、
このオプションでは毎回ウェブサイトを読み込んだ時に順番がランダムになるのですがそのあとは同じ順番でループします。

そうではなくて、次にどの画像が来るかわからないループスライドショーを作りたいのです。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title>テスト</title>
6<link rel="stylesheet" type="text/css" href="./flexslider.css" />
7<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
8<script type="text/javascript"  src="./jquery.flexslider.js"></script>
9<script type="text/javascript">
10$(function() {
11    $('.flexslider').flexslider({
12        animation: "slide",
13        slideshowSpeed: 5000,
14        controlNav: false,
15        randomize: true
16    });
17});
18</script>
19</head>
20<body>
21<div class="flexslider">
22<ul class="slides">
23    <li>
24        <img src="./img/sample1.jpg" />
25    </li>
26    <li>
27        <img src="./img/sample2.jpg" />
28    </li>
29    <li>
30        <img src="./img/sample3.jpg" />
31    </li>
32    <li>
33        <img src="./img/sample4.jpg" />
34    </li>
35</ul>
36</div>
37</body>
38</html>

試したこと

・色々スライドショーのプラグインを探しましたが、見当たりませんでした。
・slickというプラグインも試しましたが、できませんでした。

補足情報（FW/ツールのバージョンなど）

このサイトを参考にスライドショーを作りました。
http://raining.bear-life.com/jquery/画像のスライドショーをするプラグイン「flexslider-2」

行動規範の内容に同意します

回答1件

ベストアンサー

flexsliderのrandomizeの処理をend callbackに移植しました。バージョンが変わったら動かない可能性あります。

JS
1$(document).ready(function () {
2  $('.flexslider').flexslider({
3    animation: "slide",
4    slideshowSpeed: 1000,
5    controlNav: false,
6    randomize: true,
7    animationLoop: true,
8    end: function (slider) {
9      slider.slides.sort(function () {
10        return (Math.round(Math.random()) - 0.5);
11      });
12      slider.container.empty().append(slider.slides);
13      slider.doMath();
14      slider.setup("init");
15    }
16  });
17});