JSFiddle - React, Tailwind, and code Playground

by Evan Sharp

HTML

<div class="roloFlip" id="wrap">
    <div class="top">    </div>
    <div class="bottom">    </div>
</div>
<div class="roloFlip" id="wrap">
    <div class="top">    </div>
    <div class="bottom">    </div>
</div>
<div class="roloFlip" id="wrap">
    <div class="top">    </div>
    <div class="bottom">    </div>
</div>

CSS

.roloFlip{
    height:150px;
    width: 100px;
    margin: 20px 0 0 20px;
    position:relative;
    float:left;
}
.roloFlip div{
    background:transparent none scroll no-repeat 0 0;
    height: 75px;
    width: 100px;
    position: relative;
}
.roloFlip .top{
    background-position: top center;
}
.roloFlip .bottom{
    background-position: bottom center;
}
canvas.one{
    position:absolute;
    top:0;
    left:0;
}

JavaScript

(function($) {

    var roloFlip = function(element, options) {

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

        var vars = {
            c: null,
            ctx: null,
            tC:null,
            tCtx: null,
            bC:null,
            bCtx:null,
            tmpC: null,
            tmpCtx: null,
            imgs: [],
            loaded: 0,
            itop: null,
            ibot: null,
            imid: null,
            holder: null,
            curImg: -1,
            orderFunction: false,
            ready: false,
            height: null,
            width: null,
            imgObj: [],
            flip: null,
            oldImg: null,
            flipCount: 0
        };
        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() {
            vars.oldImg = vars.curImg;
            if (vars.orderFunction) {
                vars.curImg = settings.order.call(this, vars.imgs, vars.curImg);
                return vars.curImg;
            } else {
                vars.curImg++;
                if (vars.curImg + 1 > vars.imgs.length) vars.curImg = 0;
                return vars.curImg;
            }
        }

        var changeImage = function(index) {
            var img = vars.oldImg;
            vars.tmpCtx.clearRect(0, 0, vars.width, vars.height);
            vars.tmpCtx.save();
            vars.tmpCtx.drawImage(vars.imgObj[img], 0, 0,...