JSFiddle - React, Tailwind, and code Playground

by nikolya223

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
<script src="http://ptica-schastya.besaba.com/scripts/jquery-1.8.2.js"></script>
<style>
*{margin: 0px;
padding: 0px;}
	#OurSlider{
		width: 700px;
		margin: 0 auto;
	}
	.OurSliderTop{
	height: 450px;
	margin: 0 auto;
	width: 600px;
	}
	.OurSliderTop Li{
	position: absolute;
	height: 450px;
	width: 600px;
	list-style: none;
	}
	.OurSliderTop Li img{
	width: 100%;
	height: 100%;
	}
	.OurSliderBottom{
	padding: 2px;
	padding: 3px;
	height: 75px;
	border: 2px solid #9573f9;
	position: relative;
	}
	.OurSliderBottomb {
	margin: 0 auto;
	width: 600px;
	overflow-x: hidden;
	}
	.OurSliderBottomUl{
	width: 999px;
	height: 80px;
	position: relative;
	}
	.OurSliderBottomUl li{
	list-style: none;
	float: left;
	padding-right: 2px;
	background: green;
	height: 75px;
	width: 121px;
	}
	.OurSliderBottom img:hover{
		cursor: pointer;
	}
	.OurSliderBottomUl li>img{
	width: 100%;
	height: 100%;
	opacity: 0.8;
	
	}
	.OurSliderBottomUl li>img:hover{
	opacity: 1;
	}
	#leftArrow{
	position: absolute;
	left: 0px;
	top: 10px;
	
	}
	 #rightArrow{
	position: absolute;
	right: 0px;
	top: 10px;
	 }
</style>
</head>
<body>

<!--Здесь находится наш слайдер, по моей задумке он должен быть универсальным - т.е нет никакой нужды при изменении колличества изображений каждый раз менять CSS, только вначале, остальное сам подстроит..
изображения подключаются в скрипт, но на первом этапе надо задать хотябы ОДНО в главном окне слайдера и какие нибудь THUMB-ы в нижней части чтобы не так в глаза бросалось... 

весь функционал происходит в скрипте
 -->
<DIV id="OurSlider">
	<DIV class="OurSliderTop">
		<ul class="OurSliderTopUl">
			<li><img src="http://images.thecarconnection.com/med/jeeps-production-ready-2012-grand-cherokee-concept_100379625_m.jpg"></li>
		</ul>
	</DIV>
	<div class="OurSliderBottom">
	<img src="http://ptica-schastya.besaba.com/images/elements/slider-left.png"...