スライドショーをランダムにする

スライドショーを使う案件が非常に多く、
その都度最適なプラグインなり、
自作（正確にはどなたかのお知恵をお借りして）するのですが、
一番手軽に使っているのはSLIDESJSです。
おなじみですね。

素直にマークアップした後に、
「アクセスするたびに画像をランダムにしてほしい」という要望が来まして、
他のプラグインに変えるか迷いましたが、
HTMLがシンプルな構造なので、
スライドを始める前に、スライドの中身をランダムにしてしまおう、
という結論になりました。

  var arr = [];
  $("#slides div").each(function() {
    arr.push($(this).html());
  });
  arr.sort(function() {
    return Math.random() - Math.random();
  });
  $("#slides").empty();
  for(i=0; i < arr.length; i++) {
    $("#slides").append('<div>' + arr[i] + '</div>');
  };
  setTimeout(function(){
    $(function() {
      $('#slides').slidesjs({
        width: 980,
        height: 440,
        navigation: false,
        play: {
          auto: true,
          effect: "fade",
          interval: 7000
        },
        pagination: {
          effect: "fade"
        },
        effect: {
          fade: {
            speed: 1000
          }
        }
      });
    });
  }, 700);

参考：『要素をランダムに並び替える』FINE×3　http://www.finefinefine.jp/web/kiji2068/