JSFiddle - React, Tailwind, and code Playground

by Matteo Melillo

HTML

<div class="thumbs-container">	<a class="slide-arrow sx-arrow" href="javascript:void(0);">&laquo;</a>

    <a
    class="slide-arrow dx-arrow" href="javascript:void(0);">&raquo;</a>
        <div id="thumbs">
            <div class="thumbs-content">
                <ul id="thumbs-wrapper" class="thumbs-wrapper clearfix">
                    <li class="thumb gradient1"></li>
                    <li class="thumb gradient2"></li>
                    <li class="thumb gradient3"></li>
                    <li class="thumb gradient4"></li>
                    <li class="thumb gradient5"></li>
                </ul>
            </div>
        </div>
</div>

CSS

.thumbs-container {
    position:relative;
    width:540px;
    height:360px;
    margin-left:50px;
}
.thumbs-container .slide-arrow {
    display:block;
    width:36px;
    height:96px;
    position:absolute;
    top:60px;
    left:-45px;
    font-family:Georgia, serif;
    text-decoration:none;
    color:#3c3c3c;
    font-size:30px;
    outline:0;
}
.thumbs-container .slide-arrow.dx-arrow {
    left:auto;
    right:-60px;
}
#thumbs {
    width: 570px;
    height: 360px;
    overflow: hidden;
    position: relative;
}
.thumbs-content {
    width:540px;
    overflow:hidden;
    position:relative;
    height:130px;
}
.thumbs-wrapper {
    position: absolute;
    width: 3000em;
    top: 0;
    left: 0;
}
.thumbs-wrapper .thumb {
    float: left;
    width: 160px;
    height: 100px;
    margin: 30px 30px 0 0;
}
.thumbs-wrapper .thumb.gradient1 {
    background-image: #4e4e48;
    background-image: -webkit-linear-gradient(bottom right, #de55d7 0%, #0d9602 100%, #000000 100%);
    background-image: -moz-linear-gradient(bottom right, #de55d7 0%, #0d9602 100%, #000000 100%);
    background-image: -o-linear-gradient(bottom right, #de55d7 0%, #0d9602 100%, #000000 100%);
    background-image: -ms-linear-gradient(bottom right, #de55d7 0%, #0d9602 100%, #000000 100%);
    background-image: linear-gradient(bottom right, #de55d7 0%, #0d9602 100%, #000000 100%);
}
.thumbs-wrapper .thumb.gradient2 {
    background-image: #6a7259;
    background-image: -webkit-linear-gradient(top left, #eb622d 0%, #52f5df 100%, #000000 100%);
    background-image: -moz-linear-gradient(top left, #eb622d 0%, #52f5df 100%, #000000 100%);
    background-image: -o-linear-gradient(top left, #eb622d 0%, #52f5df 100%, #000000 100%);
    background-image: -ms-linear-gradient(top left, #eb622d 0%, #52f5df 100%, #000000 100%);
    background-image: linear-gradient(top left, #eb622d 0%, #52f5df 100%, #000000 100%);
}
.thumbs-wrapper .thumb.gradient3 {
    background-image: #70415c;
    background-image:...

JavaScript

var Slider = new Class({

		width: 0,
		start: 0,

		initialize: function( slider, arrowDx, arrowSx, nEle, speed ) {
			this.slider = slider;
			this.arrowDx = arrowDx;
			this.arrowSx = arrowSx;
			this.nEle = nEle;
			this.speed = speed;
			this.thumbs = this.slider.getElementById('thumbs-wrapper');
		},

		getWidth: function() {
			var size = this.slider.getSize();
			return size.x / 3 ;
		},
		
		getStart: function() {
			this.start = -this.width * this.nEle;
			this.thumbs.setStyle("left", this.start + "px");
		},

		getCurrentPos: function() {
			return parseInt(this.thumbs.getStyle("left"));
		},

		cloneElements: function() {

			var elements = $$('#thumbs-wrapper .thumb');
			var first = elements[0];

			elements.each(function(element) {
				element.clone()
					.addClass('cloned')
					.inject( this.thumbs )
					.clone()
					.inject( first, 'before' );
			}.bind(this));
			
		},

		slideRight: function() {

			if (!this.speed) { this.speed = 500 };

			slideRight = new Fx.Morph(this.thumbs, {
				duration: this.speed,
				transition: Fx.Transitions.Sine.easeOut,
				onComplete: function() {
					if ( ( this.getCurrentPos() ) == 2 * this.start ) {
					this.thumbs.setStyle("left", this.start + "px");
					}
				}.bind(this),
			});

			this.arrowDx.addEvent('click', function() {

				var currentPos = this.getCurrentPos(),
				left = currentPos - this.width;

				slideRight.start({
					'left': [ currentPos, left]
				});

			}.bind(this));

		},

		slideLeft: function() {

			if (!this.speed) { this.speed = 500 };

			slideLeft = new Fx.Morph(this.thumbs, {
				duration: this.speed,
				transition: Fx.Transitions.Sine.easeOut,
				onComplete: function() {
					if ( ( this.getCurrentPos() ) == 0 ) {
					this.thumbs.setStyle("left", this.start + "px");
					}
				}.bind(this),
			});

			this.arrowSx.addEvent('click', function() {

				var currentPos = this.getCurrentPos(),
				left = currentPos + this.width;

				slideLeft.start({
					'left': [...