JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sliderFrame">
        <div id="slider">
            <a href="http://www.menucool.com/jquery-slider" target="_blank">
                <img src="http://s21.postimg.org/hx350x0kz/image_slider_1.jpg" alt="Welcome to jQuery Slider" />
            </a>
            <a class="lazyImage" href="http://s21.postimg.org/buviafc4z/image_slider_2.jpg" title="Pure Javascript. No jQuery. No Flash.">Pure JavaScript</a>
            <a href="http://www.menucool.com/javascript-image-slider"><b data-src="http://s21.postimg.org/645bwp44z/image_slider_3.jpg">Image Slider</b></a>
            <a class="lazyImage" href="http://s21.postimg.org/755kltl4j/image_slider_4.jpg" title="">Slide 4</a>
        </div>
        <!--thumbnails-->
        <div id="thumbs">
            <div class="thumb">
                <div class="frame"><img src="http://s21.postimg.org/teewemr77/thumb1.jpg" /></div>
                <div class="thumb-content"><p>HTML Content</p>Thumbnails allows any HTML content</div>
                <div style="clear:both;"></div>
            </div>
            <div class="thumb">
                <div class="frame"><img src="http://s21.postimg.org/hdy1rn96b/thumb2.jpg" /></div>
                <div class="thumb-content"><p>Customizable</p>Thumbnail style is customizable</div>
                <div style="clear:both;"></div>
            </div>
            <div class="thumb">
                <div class="frame"><img src="http://s21.postimg.org/yiargkroz/thumb3.jpg" /></div>
                <div class="thumb-content"><p>Variety of Layouts</p>Just a CSS tweak.</div>
                <div style="clear:both;"></div>
            </div>
            <div class="thumb">
                <div class="frame"><img src="http://s21.postimg.org/w4stpkd9v/thumb4.jpg" /></div>
                <div class="thumb-content"><p>Integration</p>Built-in functions for the thumbnails</div>
                <div style="clear:both;"></div>
            </div>
        </div>
        <!--clear above float:left...

CSS

/* http://www.menucool.com */

/*slider frame*/
#sliderFrame 
{
    width:920px;
    margin:0 auto; /*center-aligned*/
    padding:20px;
    box-shadow: 0 0 5px #BBB;border:1px solid #CCC; background-color:#FFF;
}

#slider, #slider div.sliderInner {
    width:680px;height:306px;/* Must be the same size as the slider images */
}

#slider {
    float:left;
	background:#fff url(loading.gif) no-repeat 50% 50%;
	position:relative;
    transform: translate3d(0,0,0);
}

/* the link style (if an image is wrapped in a link) */
#slider a.imgLink, #slider .video {
	z-index:2;
	position:absolute;
	top:0px;left:0px;border:0;padding:0;margin:0;
	width:100%;height:100%;
}
#slider .video {
	background:transparent url(video.png) no-repeat 50% 50%;
}

/* Caption styles */
#slider div.mc-caption-bg, #slider div.mc-caption-bg2 {
	position:absolute;
	width:400px;
	height:auto;
	padding:10px 0;/* 10px will increase height.*/
	left:120px; /*if the caption needs to be aligned from right, specify by right instead of left. i.e. right:20px;*/
	bottom:10px;/*if the caption needs to be aligned from top, specify by top instead of bottom. i.e. top:150px;*/
	z-index:3;
	overflow:hidden;
	font-size:0;
}
#slider div.mc-caption-bg {
    /* NOTE: Its opacity is to be set through the sliderOptions.captionOpacity setting in the js-image-slider.js file.*/
	background:#DDD;/* or any other colors such as Black, or: background:none; */
	border:1px solid white;
	border-radius: 5px;
}
#slider div.mc-caption-bg2 {
    background:none;
}
#slider div.mc-caption {
	font:bold 13px/16px Arial;
	color:#069;
	z-index:4;
	text-align:center;
    background:none;
}
#slider div.mc-caption a { 
	color:#060;
}


/* ------ built-in navigation bullets wrapper that is relative to the #slider ------*/
#slider div.navBulletsWrapper  {
	display:none;
}

/* --------- Others ------- */

#slider div.loading 
{
    width:100%; height:100%;
    background:transparent url(loading.gif) no-repeat 50% 50%;
    filter:...

JavaScript

var sliderOptions = {
    sliderId: "slider",
    startSlide: 0,
    effect: "1,4,5,6,7,8,9,12,13,14,15,17",
    effectRandom: true,
    pauseTime: 2600,
    transitionTime: 500,
    slices: 11,
    boxes: 7,
    hoverPause: 2,
    autoAdvance: true,
    captionOpacity: 0.6,
    captionEffect: "rotate",
    thumbnailsWrapperId: "thumbs",
    m: false,
    license: "b6t80"
};

var imageSlider = new mcImgSlider(sliderOptions);

/* Menucool Javascript Image Slider v2014.1.4. Copyright www.menucool.com */
function mcImgSlider(k) {
    for (var T = function (a) {
        return document.getElementById(a)
    }, d = "length", ab = "getElementsByTagName", C = function (e) {
            var a = e.childNodes,
                c = [];
            if (a)
                for (var b = 0, f = a[d]; b < f; b++) a[b].nodeType == 1 && c.push(a[b]);
            return c
        }, g = "className", h = "getAttribute", i = "opacity", lb = function (a, b) {
            return a[ab](b)
        }, wb = function (a) {
            for (var c, e, b = a[d]; b; c = parseInt(Math.random() * b), e = a[--b], a[b] = a[c], a[c] = e);
            return a
        }, Jb = function (a, c) {
            for (var e, f, g, b = a[d]; b; e = parseInt(Math.random() * b), f = a[--b], a[b] = a[e], a[e] = f, g = c[b], c[b] = c[e], c[e] = g);
            return [a, c]
        }, Ib = function (a, c, b) {
            if (a.addEventListener) a.addEventListener(c, b, false);
            else a.attachEvent && a.attachEvent("on" + c, b)
        }, Lb = document, U = window.requestAnimationFrame, db = window.cancelAnimationFrame, kb = ["webkit", "ms", "o"], cb = 0; cb < kb[d] && !U; ++cb) {
        U = window[kb[cb] + "RequestAnimationFrame"];
        db = window[kb[cb] + "CancelAnimationFrame"]
    }
    var c = "style",
        y = "display",
        G = "visibility",
        j = "width",
        z = "height",
        Y = "top",
        P = "background",
        r = "undefined",
        x = "marginLeft",
       ...