JSFiddle - React, Tailwind, and code Playground

by Hiramoto Makiko

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>

<div class="slideshow">
  <div class="slide"><img src="http://placehold.jp/FFFC19/333333/150x150.png?text=イメージ１"></div>
  <div class="slide"><img src="http://placehold.jp/FF0000/333333/150x150.png?text=イメージ２"></div>
  <div class="slide"><img src="http://placehold.jp/1485CC/333333/150x150.png?text=イメージ３"></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);
});