JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
<div class="image_slider">

	<div class="image_slider_wrap">
		<ul id="LinkSliderList">	
            <li><img src="https://si0.twimg.com/profile_images/317998663/3_MTV3FI.jpg" /></li>
            <li><img src="http://www.mainostajanhakemisto.fi/pics/24798.jpg" /></li>
            <li><img src="https://si0.twimg.com/profile_images/317998663/3_MTV3FI.jpg" /></li>
            <li><img src="http://www.mainostajanhakemisto.fi/pics/24798.jpg" /></li>
            <li><img src="https://si0.twimg.com/profile_images/317998663/3_MTV3FI.jpg" /></li>
            <li><img src="http://www.mainostajanhakemisto.fi/pics/24798.jpg" /></li>
		</ul>
	</div>
    <div class="controls">
	</div>
</div>

CSS

.image_slider {
	position: relative;
	border-top: 1px solid #e8e8e8;
	border-bottom: 1px solid #e8e8e8;
	padding: 20px 0;
    

}

.image_slider ul {
	padding: 20px;
	margin-right:50px;
	width: 90%;

}

.image_slider li {
	list-style: none;
    float:left;
    margin-right:3px;
}

.image_slider .even .padding {
	border-left: 1px solid #e8e8e8;
	border-right: 1px solid #e8e8e8;
}

.image_slider .empty .padding  {
	border: none;
}

.image_slider .padding {
	padding: 0 30px;
	text-align: center;
}

.image_slider_wrap {
	overflow: hidden;
	position: relative;
}

.image_slider_wrap ul {
	position: relative;
}


.controls span {
	position: absolute;
	top: 120%;
	left: 0;
	margin-top: -46px;
 
	display: block;
	width: 50px;
	height: 50px;
	background-image:url(http://dribbble.s3.amazonaws.com/users/3445/screenshots/110236/shot_1296824060.jpg);
    background-position: 255px 205px;
	cursor: pointer;
	text-indent: -2000em;
}

.controls .next {
	background-position: 195px 205px;
	right: 0;
	left: auto;
}

JavaScript

//Groovyb fiddle

LoadSlider();

function LoadSlider() {
            if ($(".image_slider").find('li').length > 3) {
                var controlsHtml = "<span class=\"previous\" title=\"Previous\"><</span><span class=\"next\" title=\"Next\">></span>"
                $(".image_slider").find(".controls").html(controlsHtml);
                var SliderItemsCount = $(".image_slider").find('li').length;

                var remainder = SliderItemsCount % 3;
                if (remainder < 2 && remainder != 0) {
                    $("<li class=\"empty\">&nbsp;</li><li class=\"empty\">&nbsp;</li>").appendTo(".image_slider ul");
                    SliderItemsCount += 2;
                } else if (remainder > 1 && remainder != 0) {
                    $("<li class=\"empty\">&nbsp;</li>").appendTo(".image_slider ul");
                    SliderItemsCount += 1;
                };

                var animationWidth = $(".image_slider").width();
                $(".image_slider_wrap").css("width", $(".image_slider").width() - 2);
                $(".image_slider ul").css("width", (animationWidth) * (SliderItemsCount + 6));
                $(".image_slider li").css("width", (animationWidth) / 3);
                var sliderCounter = 1;


                $(".image_slider li").eq(-1).clone().prependTo(".image_slider ul");
                $(".image_slider li").eq(-2).clone().prependTo(".image_slider ul");
                $(".image_slider li").eq(-3).clone().prependTo(".image_slider ul");
                $(".image_slider li:nth-child(4)").clone().appendTo(".image_slider ul");
                $(".image_slider li:nth-child(5)").clone().appendTo(".image_slider ul");
                $(".image_slider li:nth-child(6)").clone().appendTo(".image_slider ul");

                $(".image_slider li:nth-child(even)").addClass("even");

                $(".image_slider ul").css("left", (animationWidth) * -1);

                $(".controls span").click(function () {
                    var...