slick.jsを使ったスライド画像をランダム表示する

参考サイト

https://github.com/kenwheeler/slick/issues/359

ソース

サンプル

HTML

<div class="slideshow">
  <div class="slide"><img src="xxxx.png"></div>
  <div class="slide"><img src="xxxx.png"></div>
  <div class="slide"><img src="xxxx.png"></div>
  <div class="slide"><img src="xxxx.png"></div>
  <div class="slide"><img src="xxxx.png"></div>
</div>

JavaScript

var $slideshow = $('.slideshow');
var $slide = $('.slide');

function randomize(selector){
  $slideshow.find(selector).sort(function(){
    return Math.round(Math.random()) - 0.5;
  }).detach().appendTo($slideshow);
}

$(function(){
  randomize('.slide');
  $slideshow.slick($slide);
});