JSFiddle - React, Tailwind, and code Playground

by Matteo Melillo

HTML

<div class="nivo-slider">
	<div class="navigation"></div>
	<a class="prev" href="javascript:void(0);">&laquo;</a>
	<a class="next" href="javascript:void(0);">&raquo;</a>
	<div id="nivo">
        <div class="element"><img src="http://blog.artera.it/wp-content/uploads/2013/06/slider_left_right/image_1.jpg" /></div>
		<div class="element"><img src="http://blog.artera.it/wp-content/uploads/2013/06/slider_left_right/image_2.jpg" /></div>
		<div class="element"><img src="http://blog.artera.it/wp-content/uploads/2013/06/slider_left_right/image_3.jpg" /></div>
		<div class="element"><img src="http://blog.artera.it/wp-content/uploads/2013/06/slider_left_right/image_4.jpg" /></div>
		<div class="element"><img src="http://blog.artera.it/wp-content/uploads/2013/06/slider_left_right/image_5.jpg" /></div>
	</div>
</div>

CSS

.nivo-slider{
    position:relative;
    margin: 30px auto 0;
    width:620px;
    height: 460px;
}
#nivo{
    position: relative;
    overflow: hidden;
    width: 620px;
    height: 460px;
}
#nivo .element {
	display:none;
    position: absolute;
    top: 0;
    right: auto;
    left: auto;
    width: 620px;
    height: 460px;
    zoom: 1;
	z-index:auto;
}
.prev{
    position: absolute;
    top: 185px;
    left: -40px;
    cursor: pointer;
    color:#000;
    font-size:50px;
    line-height:normal;
    text-decoration:none;
}
.next{
    position: absolute;
    top: 185px;
    line-height:normal;
    right: -40px;
    cursor: pointer;
    color:#000;
    font-size:50px;
    text-decoration:none;
}
#nivo .slide1 {
    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%);
}
#nivo .slide2 {
    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%);
}
#nivo .slide3 {
    background-image: #70415c;
    background-image: -webkit-linear-gradient(bottom, #ff2b1f 0%, #5297f5 100%, #000000 100%);
    background-image: -moz-linear-gradient(bottom, #ff2b1f 0%, #5297f5 100%, #000000 100%);
   ...

JavaScript

jQuery(document).ready(function() {

	var sliderElements = $('#nivo').find('.element'),
		nEle    = sliderElements.length,
		navigation = $('.navigation'),
		i       = 0,
		counter = 0,
		speed   = 800,
		delta   = $('#nivo .element').width(),
		move    = false,

		operation = {
			'+': function(a, b) { return a + b },
			'-': function(a, b) { return a - b },
		},

		sliding = function(direction, operator, nextCounter) {

			if (move) { return false; }
			move = true;

			$(sliderElements[counter]).css({'display': 'block', 'z-index': '1', left : 'auto', right: 'auto' });
			$(navElements[counter]).removeClass('active');

			var hash = {};
			hash[direction] = delta;


			if ( nextCounter != undefined )
				counter = nextCounter;

			if ( direction == 'left' && counter == nEle - 1 )
				counter = - 1;
			else if ( direction == 'right' && counter == 0 )
				counter = nEle;

			$(navElements[operation[operator](counter, 1)]).addClass('active');
			$(sliderElements[operation[operator](counter, 1)]).css(hash);

			hash[direction] = 0;

			$(sliderElements[operation[operator](counter, 1)]).css({'display': 'block', 'z-index': '10' });
			$(sliderElements[operation[operator](counter, 1)]).animate(hash, speed, function() {
					move = false;
					$(sliderElements).css({'display': 'none', 'z-index': 'auto' });
					$(this).css({display: 'block', right : 'auto', left : 'auto'});
					counter = operation[operator](counter, 1);
				}
			);


		};

	//start and autoplay
	$(sliderElements).each(function() {
		navigation.append('<a href="javascript:void(0)" data-position="'+ i +'"></a>');
		i = i+1;
	});

	var navElements = navigation.find('a');
		autoplaySlide = setInterval(function() {
 		sliding('left','+');
	},5000);

	$(sliderElements[0]).css({ display:"block", 'z-index' : '1', left: 0, right:0 });
	$(navElements[0]).addClass('active');


	$('.prev').click(function() {
		sliding('right','-');
		clearInterval(autoplaySlide);
	})

	
	$('.next').click(function()...