JSFiddle - React, Tailwind, and code Playground

by yoowordpress

HTML

<div id="slider-wrap">
    <ul id="slider">
        <li class="slide li-1"><img src="http://newcoin.pp.ua/wp-content/uploads/2014/07/Acura_TL_2008__02_1680x1050.jpg" class="slide-img"/></li>
        <li class="slide li-2"><img src="http://newcoin.pp.ua/wp-content/uploads/2014/07/Acura_RDX_37_1680.jpg" class="slide-img"/></li>
        <li class="slide li-3"><img src="http://newcoin.pp.ua/wp-content/uploads/2014/07/Acura_MD-X_52_1680x1050.jpg" class="slide-img"/></li>
        
         <li class="slide li-1"><img src="http://newcoin.pp.ua/wp-content/uploads/2014/07/Acura_TL_2008__02_1680x1050.jpg" class="slide-img"/></li>
        <li class="slide li-2"><img src="http://newcoin.pp.ua/wp-content/uploads/2014/07/Acura_RDX_37_1680.jpg" class="slide-img"/></li>
        <li class="slide li-3"><img src="http://newcoin.pp.ua/wp-content/uploads/2014/07/Acura_MD-X_52_1680x1050.jpg" class="slide-img"/></li>
         <li class="slide li-1"><img src="http://newcoin.pp.ua/wp-content/uploads/2014/07/Acura_TL_2008__02_1680x1050.jpg" class="slide-img"/></li>
        <li class="slide li-2"><img src="http://newcoin.pp.ua/wp-content/uploads/2014/07/Acura_RDX_37_1680.jpg" class="slide-img"/></li>
        <li class="slide li-3"><img src="http://newcoin.pp.ua/wp-content/uploads/2014/07/Acura_MD-X_52_1680x1050.jpg" class="slide-img"/></li>
         <li class="slide li-1"><img src="http://newcoin.pp.ua/wp-content/uploads/2014/07/Acura_TL_2008__02_1680x1050.jpg" class="slide-img"/></li>
        <li class="slide li-2"><img src="http://newcoin.pp.ua/wp-content/uploads/2014/07/Acura_RDX_37_1680.jpg" class="slide-img"/></li>
        <li class="slide li-3"><img src="http://newcoin.pp.ua/wp-content/uploads/2014/07/Acura_MD-X_52_1680x1050.jpg" class="slide-img"/></li>
         <li class="slide li-1"><img src="http://newcoin.pp.ua/wp-content/uploads/2014/07/Acura_TL_2008__02_1680x1050.jpg" class="slide-img"/></li>
        <li class="slide li-2"><img...

CSS

#slider-wrap {
}
.li-1 {
    background-color: red;
}
.li-2 {
    background-color: green;
}
.li-3 {
    background-color: blue;
}
#slider {
    overflow: hidden;
}
.slide {
    height: 100%;
    width: 100%;
}
/*
.slide-img {
    height: 100%;
    width: 100%;
}
*/
.sli-cont span{}
.thumb-nav {
    position: absolute;
    top: 50%;
    font-size: 30px;
    font-weight: bold;
    margin-top: -15px;
    cursor:pointer;
}

.sli-cont {
    margin-left: 50px;
    overflow: hidden;
}
.left-thumb{}
.right-thumb {
    right: 0;
}
.sli-links {
    bottom: 20px;
    margin-top: 10px;
    position: absolute;
    height:60px;
    overflow:hidden;
    color:#fff;
    width:100%;
}
.sli-links .control-slide {
    background-color: #eee;
    display: inline-block;
    height: 60px;
    margin: 2px;
    overflow: hidden;
    text-indent: -9999px;
    width: 100px;
}
.sli-links .control-slide:hover {
    background-color: gold;
    cursor: pointer;
}
.sli-links .control-slide.active {
    background-color: #000;
}
#prewbutton, #nextbutton {
    background-color: #000;
    display: block;
    height: 50px;
    opacity: 0.8;
    outline: medium none !important;
    overflow: hidden;
    position: absolute;
    text-indent: -999px;
    top: 50%;
    margin-top:-25px;
    width: 15px;
    z-index: 3;
}
#prewbutton {
    left: 10px;
}
#nextbutton {
    background-color: #000;
    right: 10px;
}
#prewbutton:hover, #nextbutton:hover {
    opacity: 1;
}

JavaScript

(function ($) {
	var methods = {
		init: function (options) {
			var p = {
				parent: $(window),
				position:'absolute',	//'absolute' or 'fixed'
				veticalAlign:'middle',	//'top','bottom' or 'middle' - default
				align:'center'			//'left','right' or 'center' - default
			};
			if (options) {
				$.extend(p, options);
			}
			return this.each(function () {
				var positionEl;
				if(p.position == 'absolute' || p.position == 'fixed'){
					positionEl = p.position;	
				}else{
					positionEl = 'absolute';	
				}
				var 
				elWrap = $('<div>').addClass('fullsizeWrap').css({left:'0',top:'0',width:'100%',height:'100%',overflow:'hidden',position:positionEl}),
				el = $(this).css({position:'absolute',maxWidth:'none',minWidth:0,maxHeight:'none',minHeight:0}).wrap(elWrap),
				parent = el.closest(p.parent).addClass('coverParent');
				if($.isWindow(p.parent[0])){
					parent = $(window)
				}
					
				var
				elClone = el.clone().removeAttr('class').removeAttr('width').removeAttr('height').css({left:'-9999px',top:'-9999px'}).appendTo('body'),
				elCloneW = elClone.width(),
				elCloneH = elClone.height(),
				wW = parent.width(),
				wH = parent.height(),
				elFactor = elCloneW / elCloneH,
				wFactor = wW/wH;
				
				var fullSizeFunc = function(){
					if(elFactor < wFactor){

						var 
						elH = wW / elFactor,
						elTop = (elH - wH) / 2;
						el.css({width:wW,height:elH, top:-elTop, left:'0'});
					}else{

						var 
						elW = wH * elFactor,
						elLeft = (elW - wW) / 2;
						el.css({height:wH,width:elW, left:-elLeft, top:'0'});	
					}
					
					if(p.veticalAlign == 'top'){
						el.css({top:0,bottom:'auto'})	
					}
					if(p.veticalAlign == 'bottom'){
						el.css({top:'auto',bottom:'0'})	
					}
					if(p.align == 'left'){
						el.css({right:'auto',left:'0'})		
					}
					if(p.align == 'right'){
						el.css({left:'auto',right:'0'})		
					}
					
				};
				elClone.remove();
				fullSizeFunc();
				el.fadeTo(500,1)
				$(window).on('resize...