JSFiddle - React, Tailwind, and code Playground

by yurik417

HTML

<h2>CLEAN SLIDIK</h2>
    <ul id="slide_0" class="slidik">
        <li><img src="http://masscode.ru/files/1.jpg"></li>
        <li><img src="http://masscode.ru/files/2.jpg"></li>
        <li><img src="http://masscode.ru/files/3.jpg"></li>
        <li><img src="http://masscode.ru/files/4.jpg"></li>
    </ul>

    <h2>THEME SLIDIK - BLACK SQUARE</h2>
    <ul id="slide_1" class="slidik">
        <li><img src="http://masscode.ru/files/1.jpg"></li>
        <li><img src="http://masscode.ru/files/2.jpg"></li>
        <li><img src="http://masscode.ru/files/3.jpg"></li>
        <li><img src="http://masscode.ru/files/4.jpg"></li>
        <a data-slidik="slide_1" class="next" href="#">Next</a>
        <a data-slidik="slide_1" class="prev" href="#">Prev</a>
        <div data-slidik="slide_1" class="dotted"></div>
    </ul>

    <h2>THEME SLIDIK - BLACK CLASSIC</h2>
    <ul id="slide_2" class="slidik">
        <li><img alt="В центре сюжета — противостояние солдата и робота-терминатора, прибывших в 1984-й год из постапокалиптического 2029 года" src="http://masscode.ru/files/1.jpg"></li>
        <li><img alt="Цель терминатора: убить Сару Коннор — девушку, чей ещё нерождённый сын выиграет войну человечества с машинами" src="http://masscode.ru/files/2.jpg"></li>
        <li><img alt="Влюблённый в Сару солдат Кайл Риз пытается помешать терминатору" src="http://masscode.ru/files/3.jpg"></li>
        <li><img src="http://masscode.ru/files/4.jpg"></li>
        <a data-slidik="slide_2" class="next" href="#">Next</a>
        <a data-slidik="slide_2" class="prev" href="#">Prev</a>
        <div class="captionWrap"><div data-slidik="slide_2" class="caption"></div></div>
        <div data-slidik="slide_2" class="dotted"></div>
    </ul>
            
    <h2>SLIDIK THUMBS</h2>
    <ul id="slide_3" class="slidik">
        <li><img src="http://masscode.ru/files/1.jpg"></li>
        <li><img src="http://masscode.ru/files/2.jpg"></li>
        <li><img src="http://masscode.ru/files/3.jpg"></li>
...

CSS

/*Layout CSS*/
body {
    color: #999;
    font: 13px/1.2em Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0 10px;
}
.conteiner {
    margin: auto;
    max-width: 800px;
}
h2 { clear:both; padding:40px 0 5px 0; line-height:1.2em}

/*Plugin CSS*/
.slidik {
	padding:0;
	margin:0;
	list-style:none;
	width:100%;
	max-width:600px;
	position:relative;
	//zoom:1;
	font-size:0;
	line-height:0;
}
.slidik li {
	padding:0;
	margin:0;
	list-style:none;
	display:block;
	//zoom:1;
	position:absolute; 
	top:0;
	left:0;
	width:100%;
}
.slidik img {
	width:100%;
}
.slidik li {
	display:none;
	z-index:1
}
.slidik li.show {
	/*display:block;*/
	z-index:2
}
.captionContent { 
	display:none;
}
.dottedItem {
	cursor:pointer;
}

.thumbs {
	width:100%;
	max-width:600px;
	margin:auto;
	overflow:hidden;
	position:relative;
	z-index:3;
}
.thumbItem { float:left; opacity:0.7; cursor:pointer;}
.thumbItem img {width:100%}
.thumbItem.cur {opacity:1}

.next,
.prev,
.dotted,
.caption,
.thumbs { visibility:hidden}
/*user CSS*/
/*BLACK SQUARE*/
#slide_1 {
	margin:auto
}
#slide_1 .caption {
	padding:10px 0;
}
#slide_1 .next,
#slide_1 .prev {
	width:29px;
	height:29px;
	display:block;
	text-indent:-9999px;
	background:url(http://masscode.ru/files/arr.gif) 0 0 no-repeat;
	margin:0 0 1px 0;
	position:absolute;
	top:0; 
	right:0;
	z-index:3;
	opacity:0.5
}
#slide_1 .prev { 
	top:30px;
	background-position:0 -29px;
}
#slide_1 .next:hover,
#slide_1 .prev:hover {
	opacity:1
}
#slide_1 .dotted {
	position:absolute;
	left:0;
	bottom:0;
	z-index:3
}
#slide_1 .dottedItem {
	width:29px;
	height:29px; 
	background:#000;
	display:inline-block;
	vertical-align:top;
	text-align:center;
	font:11px/28px Arial, Helvetica, sans-serif;
	margin:0 1px 0 0;
	color:#fff;
	cursor:pointer;
	opacity:0.5;
}
#slide_1 .dottedItem:hover,
#slide_1 .dottedItem.cur {
	opacity:1
}


/*BLACK CLASSIC*/
#slide_2 {margin:0 0 30px 0}
#slide_2 .captionWrap...

JavaScript

/*плагин*/
(function($){
	$.fn.liSlidik = function(params){
		var p = $.extend({
			auto:3000,			//false - чтобы выключить слайд-шоу, или целое число (милисекунды) - чтобы включить и задать время между сменой слайдов
       		duration: 1000		//Число, определяющие, как долго будет протекать анимация смены слайда (в миллисекундах)
		}, params);
		return this.each(function(){
			var 
			slidik = $(this),
			sImg = $('img',slidik),
			sItem = $('li',slidik),
			sItemLength = sItem.length;
			var	sItemShow;
			if($('.show',slidik).length){
				sItemShow = $('.show',slidik);
			}else{
				sItemShow = sItem.eq(0).addClass('show');
			}
			var 
			sItemShowIndex = sItem.index($(sItemShow)),
			sDotted = $('.dotted[data-slidik='+slidik.attr('id')+']').css({visibility:'visible'}),
			sThumbs = $('.thumbs[data-slidik='+slidik.attr('id')+']').css({visibility:'visible'}),
			sCaptionEl = $('.caption[data-slidik='+slidik.attr('id')+']').css({visibility:'visible'}),
			f1 = true;
			var sNextEl = $('<div>').addClass('sNextEl').attr('data-slidik',slidik.attr('id')).appendTo('body').css({position:'fixed',left:'-99999px',top:'-99999px'});
			var sPrevEl = $('<div>').addClass('sPrevEl').attr('data-slidik',slidik.attr('id')).appendTo('body').css({position:'fixed',left:'-99999px',top:'-99999px'});;
			var autoId = function(){},
			sNext = $('.next[data-slidik='+slidik.attr('id')+']').css({visibility:'visible'}),
			sPrev = $('.prev[data-slidik='+slidik.attr('id')+']').css({visibility:'visible'}),
			sImgClone = sImg.eq(0).clone().removeAttr('class').removeAttr('width').removeAttr('height').css({left:'-99999px', top:'-99999px',position:'absolute'}).appendTo('body'),
			sImgW = sImgClone.width(),
			sImgH = sImgClone.height(),
			sImgK = sImgW / sImgH;
			sImgClone.remove();
			
			

			
			
			if(sDotted.length){
				for(i=0;i<sItemLength;i++){
					$('<span>').text(i).addClass('dottedItem').appendTo(sDotted);
				};
			}
			if(sThumbs.length){
				var sThumbsItemWidth = 100 /...