JSFiddle - React, Tailwind, and code Playground

HTML

<div id="carousel_wrap" class="carousel_wrap">
			<div id="carousel" class="carousel">
				<ul>
					<li>
						<a href="#1">
							<img src="http://prozaik.16mb.com/misc/images/kalininSlider/img1.png" width="300" height="200" alt="" />
						</a>
					</li>
					
					<li>
						<a href="#2">
							<img src="http://prozaik.16mb.com/misc/images/kalininSlider/img2.png" width="300" height="200" alt="" />
						</a>
					</li>

					<li>
						<a href="#3">
							<img src="http://prozaik.16mb.com/misc/images/kalininSlider/img3.png" width="300" height="200" alt="" />
						</a>
					</li>	

					<li>
						<a href="#4">
							<img src="http://prozaik.16mb.com/misc/images/kalininSlider/img4.png" width="300" height="200" alt="" />
						</a>
					</li>
					
					<li>
						<a href="#5">
							<img src="http://prozaik.16mb.com/misc/images/kalininSlider/img5.png" width="300" height="200" alt="" />
						</a>
					</li>

					<li>
						<a href="#6">
							<img src="http://prozaik.16mb.com/misc/images/kalininSlider/img6.png" width="300" height="200" alt="" />
						</a>
					</li>					
				</ul>
			</div>
		</div>

CSS

/*
INFO: 
project: kalininCarousel
browsers: opera/chrome/FF/ie7,8/safari
resolutions: >=1000x768
markup: Sergey Kalinin 07/2013 ([email protected])
desc: jquery-плагин для преобразования списка в карусель с возможностью прокрутки при помощи стрелок-указателей
		
version 1

TABLE OF CONTENTS:
1.global reset and common settings
2.fonts
3.layout
4.blocks
*/


/************************************************************************************************************** 1.global reset and common settings */

html, body, div, h1, h2, h3, h4, h5, h6, a, a img, p, ul, ol, li, span, fieldset , form, dl, dd, dt, table, tr, td, img, input{ 
	border: none;
	margin: 0; 
	outline: none;	
	padding: 0;
}

html{
    height:100%;		
	
}
	
body {
	height:100%;
}
	
ul{
	list-style-type: none;
}

.clear{
	clear: both;
}	

input[type="text"]:focus, input[type="password"]:focus, textarea:focus { outline: none; }

textarea{
	resize: none;
}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
		
/******************************************************************************************************************************* 2.fonts */		

/****************************************************************************************************************************** 3.layout */	
.carousel_wrap{
	margin: 0 auto;	
	padding: 0 40px;
	overflow: hidden;
	height: 200px;
	width: 930px;
	position: relative;
}

	.carousel{
		overflow: hidden;
	}

		.carousel > ul{
			overflow: hidden;
			position: relative;	
			height: 200px;			
		}
		
			.carousel > ul > li{
				float: left;
				margin: 0 5px;
			}
			
				.carousel > ul > li > a{
				
				}
				
					.carousel > ul > li > a > img{
						display: block;
					}

	.carousel_wrap .prev,
	.carousel_wrap .next{
		cursor: pointer;
		width: 40px;
		height: 40px;
		background: red;
		position: absolute;
		top: 80px;
	}
		
	.carousel_wrap .prev{
		left: 0;
	}			

	.carousel_wrap...

JavaScript

/* 
INFO: 
project: kalininCarousel
browsers: opera/chrome/FF/ie9/safari
coding: Sergey Kalinin 07/2013 ([email protected])
desc: jquery-плагин для преобразования списка в карусель с возможностью прокрутки при помощи стрелок-указателей
version 1.0
*/

// ------------------------------------------------------------------------------------------------------ PLUGIN kalininCarousel IMPLEMENTATION------------
(function($){
	// -------------------------------------------------------------------------------------------------- options ----------	
	$.fn.kalininCarousel = function(options) {					
		var options = jQuery.extend({
			offsetElements: 0,
			autoScroll: false,
			speed: 1000,
			arrowsType: 'visible',	
			rotateBy: 1,
			carouselWidth: 1000
		},options);		
		
		return this.each(function() {
			// ------------------------------------------------------------------------------------------ properties ---------		
			var	carousel_wrap = $('#carousel_wrap'),
				carousel = $('#carousel'),
				wrapperElements = $('#carousel > ul'),
				carouselElements = $('#carousel > ul > li'),
				carouselElementsWidth = carouselElements.width() + parseInt(carouselElements.css('margin-left'), 10) + parseInt(carouselElements.css('margin-right'), 10);
				carouselLength = carouselElements.length,
				carouselWidth = options.width,
				carouselHeight = carousel_wrap.height(),
				running = false;
			init();	

			// ------------------------------------------------------------------------------------------ methods ------------		
			function init(){
				$('#carousel').height(carouselHeight);
				
				wrapperElements.width(carouselElementsWidth * carouselLength);
				
				carousel_wrap.append('<div class="prev" id="prev">').append('<div class="next" id="next">');
			}
			
			function shift(direction){
				var	offset = (carouselElementsWidth * options.rotateBy * direction);
				
				if(!running){
					running = true;
					
					if(direction ==...