JSFiddle - React, Tailwind, and code Playground

by Kai

HTML

<script type="text/javascript" src="http://dev.suntimes.com/csp/cms/sites/STM/assets/js/spiderslider.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('.wrapper').spiderSlider();
    });
</script>
                    <div class="wrapper">
    <div class="slider">
        <div class="cover">
            <div class="item">
                <img src='http://dev.suntimes.com/csp/cms/sites/STM/assets/img/images/1.jpg'>
                
            </div>
            <div class="item">
                <img src='http://dev.suntimes.com/csp/cms/sites/STM/assets/img/images/2.jpg'>
                
            </div>
            <div class="item">
                <img src='http://dev.suntimes.com/csp/cms/sites/STM/assets/img/images/3.jpg'>
            </div>
            <div class="item">
                <img src='http://dev.suntimes.com/csp/cms/sites/STM/assets/img/images/4.jpg'>
            </div>
            
        </div> <!-- end of div cover -->
        
    </div>  <!-- end of div slider -->
    

    <div class="button">
    <div class="buttonCover">
         <div class="cache">
             
             </div>
             <a class="active thumb" href="#"><img src='http://dev.suntimes.com/csp/cms/sites/STM/assets/img/images/thumbs/1.jpg'></a>
             <a class="thumb" href="#"><img src='http://dev.suntimes.com/csp/cms/sites/STM/assets/img/images/thumbs/2.jpg'></a>
             <a class="thumb" href="#"><img src='http://dev.suntimes.com/csp/cms/sites/STM/assets/img/images/thumbs/3.jpg'></a>
             <a class="thumb" href="#"><img src='http://dev.suntimes.com/csp/cms/sites/STM/assets/img/images/thumbs/4.jpg'></a>
             <dti:story:image alt="thumbnail" field="SchoolLogo" class="news-tab-thumb thumb" />
         </div>
    </div> <!-- end of div button-->
    <!-- Start of div description-->
            <div class="title">
                Title of the Article Goes Here!
            </div>
    <!-- end of div...

CSS

div.featured-story-container .fs-story-box.bv4-b-top-story div#featured-story {
    margin-top: 10px;
    padding: 0px;
    overflow: hidden;
    width: 330px;
    }

    div.featured-story-container div#featured-story img {
    margin: 0;
    }

    div#featured-story div.image-container {
    float: none;
    margin: 0;
    width: auto;
    }

    div.fs-story-box div.image-container {
    float: none;
    }

    div.featured-story-container div#featured-story {
    padding: 0;
    border: none;
    }

    div#featured-story div.fs-story-box {
    border: none;
    float: none;
    padding: 0;
    margin: 0 auto;
    width: 306px;
    }

    .slider
    {
      width:329px;
      overflow:hidden;
      position:relative;
      height:200px;
    }

    .slider .cover
    {
      position:absolute;
      height:500px;
      z-index:10;
    }

    .slider .item
    {
     width:329px;
      float:left;
      position:relative;
    }

    .slider .item img
    {    
    float:left;
    }

    .button
    {
    width:329px;
      height:50px;
      overflow:hidden;
      position:relative;
      z-index:100;
    }

    .button.grid
    {
      margin-top:-450px;
      height:450px;
      overflow:auto;
    }

    .grid .buttonCover
    {
      width:329px;
      height:450px;
    }

    .buttonCover
    {
      position:absolute;
      height:55px;
    }

    .button .thumb
    {
      opacity:0.5;
      display:block;
      float:left;
      margin-right:15px;
      width:70px;
      height:48px;
      margin-top:5px;
    }

    .playPauseEffect
    {
      left:300px;
      position:absolute;
      top:300px;
      z-index:300;
    }

    .button .thumb.active
    {
      opacity:1;
    }

    .cache
    {
      opacity:0.5;
      background:url('http://dev.suntimes.com/csp/cms/sites/STM/assets/img/cache.png');
      cursor:pointer;
      position:absolute;
      width:75px;
      height:55px;
      z-index:10;
      overflow:visible;
    }

    .filler
    {
    ...

JavaScript

(function (a) {
    a.fn.spiderSlider = function (b) {
        var c = {
            speed: 700,
            pauseTime: 5000,
            spiderCache: true,
            autoPlay: true,
            spiderTimer: true,
            keyboardNav: true,
            currentSlide: 0
        };
        var b = a.extend(c, b);
        this.each(function () {
            var z = b.currentSlide,
                v = a(this),
                h = v.find(".button"),
                E = h.find(".buttonCover"),
                w = h.width(),
                B = v.find(".slider"),
                j = h.find(".thumb"),
                l = v.find(".cover"),
                f = h.find(".cache"),
                g = f.find(".filler"),
                s = f.width(),
                e = l.find(".item"),
                C = v.find(".next"),
                A = v.find(".prev"),
                n = v.find(".auto"),
                o = e.length,
                D = j.outerWidth(true),
                t = e.width(),
                r = e.height(),
                y = b.speed,
                m = b.spiderTimer,
                q = b.spiderCache,
                x = b.pauseTime,
                d = b.keyboardNav,
                p = false;
            E.width(o * D);
            l.width(o * t);
            k(0);
            if (b.autoPlay) {
                i(true)
            }
            j.click(function () {
                if (p) {
                    n.trigger("click")
                }
                k(j.index(this), t)
            });
            n.click(function () {
                if (!p) {
                    i(true)
                } else {
                    u(true)
                }
            });
            C.click(function () {
                if (p) {
                    u(true)
                }
                if (z < (o - 1)) {
                    k(z + 1)
                } else {
                    k(0)
                }
            });
            A.click(function ()...