JSFiddle - React, Tailwind, and code Playground

by johnnytrinh

HTML

<link rel="stylesheet" href="http://www.drewgreenwell.com/content/metrojs.css">
<script src="http://www.drewgreenwell.com/scripts/metrojs.js"></script>
<h1>animationComplete</h1>
<div class="red">   
    <div id="tile1" class="live-tile" data-initdelay="4500" data-delay="2500" data-mode="flip">    
        <div><p>This will be replaced with items from the hidden &lt;ul&gt; with the class 'itemsSource'
           <span class="tile-title">First Tile</span>
           </p>
        </div>
        <div>
            <p>
                item content will be here
            </p>
        </div>
    </div>
    <!-- im using a ul here, but this pattern can be used with div, p, span etc. -->
    <ul class="itemsSource">
        <li>Some content to use 1</li>
        <li>Some content with a title to use 2
            <span class="tile-title">look a title!</span>
        </li>
        <li><p>Some content in a &lt;p&gt; to use 3</p></li>     
        <li>Some content to use 4</li>
        <li>Some Content to use 5</li>
    </ul>
</div>

CSS

.itemsSource{ display:none; }

JavaScript

//animationComplete
//get the first item from the list
var $item = $(".itemsSource>li").first();
//set the back tile to have content of the first item by default
$("#tile1>div").last().html($item.html());
//set up tile
$("#tile1").liveTile({pauseOnHover: true,
    animationComplete:function(tileData,$front,$back){
    //get the next item from the list or the first
    $item = $item.next("li");
    if($item.length == 0)
        $item = $(".itemsSource>li").first();          
    $back.html($item.html());
         
}
});