JSFiddle - React, Tailwind, and code Playground

by lshettyl

HTML

<button>next</button>
<div id="top_wrapper" class="col-main left-colum lead-rotator">
    <div class="hover-overlay"></div>
    <div class="fade wrapper">
        <ul class="main">
            <li><a href="http://www.huffingtonpost.co.uk/2012/09/11/health-wine-better-heart-vodka_n_1873086.html"><img class="img-large" alt="Why Wine Is Better For Heart Than Vodka " src="http://i.huffpost.com/gen/766692/thumbs/m-WINE-BETTER-HEALTH-VODKA-460x345.jpg" />
            <p class="long-caption">
                Why Wine Is Better For Heart Than Vodka
            </p>
            </a></li>
            <li><a href="http://www.huffingtonpost.co.uk/2012/09/10/travel-top-50-floating-holidays_n_1870336.html"><img class="img-large" alt="Top 50 Floating Holidays Around The World" src="http://i.huffpost.com/gen/765239/thumbs/m-UTTER-INN-460x345.jpg" />
            <p class="long-caption">
                Top 50 Floating Holidays Around The World
            </p>
            </a></li>
            <li><a href="http://www.huffingtonpost.co.uk/2012/09/07/tablet-light-sleep-insomnia-melatonin-suppression_n_1863767.html"><img class="img-large" alt="Sleeping Tablet Not Working? " src="http://i.huffpost.com/gen/762318/thumbs/m-E-READER-SLEEP-DISRUPTION-460x345.jpg" />
            <p class="long-caption">
                Sleeping Tablet Not Working?
            </p>
            </a></li>
            <li><a href="http://www.huffingtonpost.co.uk/2012/09/06/luxury-hotel-suites-for-honeymoons-worldwide_n_1860367.html"><img class="img-large" alt="The World's Most Luxurious Honeymoon Suites" src="http://i.huffpost.com/gen/760416/thumbs/m-SANCTUARY-460x345.jpg" />
            <p class="long-caption">
                The World's Most Luxurious Honeymoon Suites
            </p>
            </a></li>
        </ul>
    </div>
    <div class="scroll wrapper">
        <ul class="thumbs">
            <li><a...

CSS

/* DL */
/** parent **/
.lead-rotator { height: 345px; overflow: visible; padding-left: 0 !important; position: relative; width: 624px; }
.lead-rotator ul { padding: 0; margin: 0; }
/** main image **/
.lead-rotator .fade.wrapper { background: #eee; float: left; height: 345px; margin: 0 10px 0 0; overflow: hidden; width: 460px; }
.lead-rotator .fade.wrapper .main { position: relative; }
.lead-rotator .fade.wrapper .main li { position:absolute; left:0px; top:0px; display:inline; }
.lead-rotator .fade.wrapper .main li img { border: none; height: 345px; width: 460px; }
.lead-rotator .fade.wrapper .main li+li { opacity: 0; }
.lead-rotator .fade.wrapper .main li.show { z-index: 10; }
.lead-rotator .fade.wrapper .main li .long-caption { background: #ccc; bottom: 24px; color: #000; font: normal 18px/24px Georgia,Arial; left: 0; opacity: 0.8; padding: 6px 16px; position: absolute; width: 428px; }
.lead-rotator .fade.wrapper .main li .long-caption a { color: #000; font: normal 18px/24px Georgia,Arial; }
/** thumbs **/
.lead-rotator .scroll.wrapper { float: left; height: 345px; overflow: hidden; position: relative; }
.lead-rotator .scroll.wrapper .thumbs { overflow: hidden; position: relative; }
.lead-rotator .scroll.wrapper .thumbs li { background: #eee; }
.lead-rotator .scroll.wrapper .thumbs li:first-child { margin: 0; }
.lead-rotator .scroll.wrapper .thumbs li+li { margin: 15px 0 0; position: relative; }
.lead-rotator .scroll.wrapper .thumbs li img { border: 0;  display: inline-block; height: 105px; vertical-align: bottom; width: 140px; }
.lead-rotator .scroll.wrapper .thumbs .long-caption { display:none; margin: 0; }
.lead-rotator .scroll.wrapper .thumbs li a:hover { text-decoration: none; }
/** overlay **/
.lead-rotator .hover-overlay { background: #4FCD99; color: #fff; display:none; font: bold 12px Helvetica,Arial; padding: 8px; position: absolute; width: 300px; z-index: 12; }
.lead-rotator .hover-overlay .arrow { background-position: -5px -110px; background-repeat:...

JavaScript

(function($) {

    $.fn.fadeOutSlider = function(options) {
        var defaults = {
            auto: true,
            interval: 3000,
            speed: 1000,
            delayOnHover: true,
            pluginParent: false,
            sideThumbs: true
        };
        
        var o = jQuery.extend(true, defaults, options);
        
        // Is the current tab in focus?
        var focused = true;

        // Create a pinging function to run in the background
        // and check whether the current tab is in focus or not
        var pinger = function () {
            var timeEnd,
                timeElapsed,
                timeBegin = new Date();
            
            setTimeout(function () {
                timeEnd = new Date();
                timeElapsed = timeEnd - timeBegin;
                // If the timeElapsed is much larger than 50,
                // the tab is in the background
                if (timeElapsed > 100) {
                    focused = false;
                } else {
                    focused = true;
                }
                pinger();
            }, 50);
        };
        
        pinger();
        
        return this.each(function() {
            var div = $(this);
            o.timer = false; o.startPos = 1; o.nextPos = 1;
            
            o.list = div.find(" > ul");
            o.itemsCount = o.list.find(" > li").size();
            
            //fixed height;
            var ul_height = o.list.find(" > li").outerHeight(true);
            o.list.css({"height": ul_height+"px"});
            
            o.list.find(" > li").css({"opacity": 0});            
            o.list.find(" > li:nth-child(" + o.nextPos + ")")
            .addClass('show')
            .stop()
            .animate({"opacity": 1}, o.speed);
            
            if (o.auto) {
                o.timer = setInterval(function () {
                    // console.log('focused?', focused);
                    if (focused) {
            ...