JSFiddle - React, Tailwind, and code Playground

by Cerlin ST

HTML

<link rel="stylesheet" href="http://herrmedia.com/projects/flip/flip-carousel.css">
<article title="item1"><h1>Item 1</h1><span>$123</span><div class="fi-graph-pie"></div></article>
<article title="item2"><h1>Item 2</h1><span>$980</span><div class="fi-asl"></div></article>
<article title="item3"><h1>Item 3</h1><span>$67</span><div class="fi-asterisk"></div></article>
<article title="item4"><h1>Item 4</h1><span>$13</span><div class="fi-blind"></div></article>
<article title="item5"><h1>Item 5</h1><span>$134</span><div class="fi-burst-new"></div></article>
<article title="item6"><h1>Item 6</h1><span>$456</span><div class="fi-calendar"></div></article>
<article title="item7"><h1>Item 7</h1><span>$99</span><div class="fi-comment-quotes"></div></article>
<article title="item8"><h1>Item 8</h1><span>$92</span><div class="fi-die-five"></div></article>
<article title="item9"><h1>Item 9</h1><span>$3</span><div class="fi-dislike"></div></article>
<article title="item10"><h1>Item 10</h1><span>$12</span><div class="fi-foot"></div></article>
<article title="item11"><h1>Item 11</h1><span>(last)</span><div class="fi-trophy"></div></article>

JavaScript

// Flip Carousel Plugin
// version 1.5
// written 12/13/12
// revamped and polished up 3/15/14
// copyright(c) 2012-2014 Ethan Herr
// http://herrmedia.com
// MIT License


$.fn.flipcarousel = function(options) {

        //default options
    var ops = $.extend({
        itemsperpage : 3, //number of cards to display at once
        duration : 500, //flip css transition-duration property in ms
        randomizer : 0, //give randomness to card flip delay and duration (0 - 1)
        loader : false, //show loader when loading content
        arrows : true, //arrows for previous/next navigation
        //accrual : 1 //number of pages to preload (forthcoming)
        pagination : false
      }, options);

        //structural elements
    var $container = $('<div class="flip-carousel">'),
        $card = $('<div class="card">'),
        $faces = $('<div class="face front"></div><div class="face back"></div>'),
        $controls = $('<div class="controls">'),
        $dots_container = $('<div class="controls dots">'),
        $span = $('<span class="dot"></span>'),
        $arrowright = $('<div class="arrow right">'),
        $arrowleft = $('<div class="arrow left hide">'),
        $loader = $('<div class="loader hide">'),
        $origs = this,
        $cells = this.clone(),

        //control elements
        i = 0, //current page index
        face = '.front', //flag for which card to append new data to
        deg = 0, //track degree of flip
        disabled = true, //flag to prevent clicks while loading

        //master page/cell tracker
        pages = []; 
        for(var p=0; p < Math.ceil($cells.length/ops.itemsperpage); p++){
            var start = ops.itemsperpage*p;
            pages[p] = $cells.slice(start, start + ops.itemsperpage )
        };

    function build(){ //make base html structure 
        
        var $li = $('<li>'),
            $ul = $('<ul>');

        $card.css({ 
            '-webkit-transition-duration': ops.duration + 'ms',
       ...