JSFiddle - React, Tailwind, and code Playground

by Evan Sharp

HTML

<script src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script>
<div class="wrap" id="wrap">
    <img src="http://www.ipsumimage.com/100x150" alt="" />
</div>

CSS

.wrap{
    height:150px;
    width: 100px;
    margin: 20px 0 0 20px;
}

JavaScript

(function( $ ){

  var roloFlip = function(element, options){

      var settings = $.extend({}, $.fn.roloFlip.defaults, options);

      var vars = {
          r: null,
          imgs: [],
          itop: null,
          ibot: null,
          imid: null,
          holder: null,
          curImg: -1,
          orderFunction: false,
          ready: false,
          height: null,
          width: null
      };
      vars.imgs = settings.imgs;
      vars.holder = $(element);

      
      var trace = function(msg){
          if(settings.debug)
              if (this.console && typeof console.log != "undefined")
                  console.log(msg);
      }
      
      var randomImage = function(images, curIndex){
          var temp;
          if(settings.preventRepeat){
              do{
                  temp = Math.floor(Math.random() * images.length);
              }while(temp == curIndex);
          }else{
              temp = Math.floor(Math.random() * images.length);
          }
          return temp;
      }
      
      var nextImage = function(){
          if(vars.orderFunction){
              trace(vars.imgs);
              curImg = settings.order.call(this, vars.imgs,vars.curImage);
              return curImg;
          }else{
              vars.curImg++;
              if(vars.curImg+1 > vars.imgs.length)
                  vars.curImg = 0;
              return vars.curImg;
          }
      }
      
      var changeImage = function(index){
          vars.itop.attr({"src":vars.imgs[index]});
            vars.imid.animate({"height":0,"clip-rect":"0 "+vars.height*5+" "+vars.width+" 0"},500,function(){
                vars.imid.attr({"clip-rect":"0 -"+vars.height*5+" "+vars.width+" 0", "src":vars.imgs[index]});
                    vars.imid.stop().animate({"height":vars.height,"clip-rect":"0 "+vars.height/2+" "+vars.width+" "+vars.height/2},500,function(){
                    vars.ibot.attr({"src":vars.imgs[index]});
                   ...