JSFiddle - React, Tailwind, and code Playground

by falkone

HTML

<div id="sliderWrapper">
		<div id="slider" data-slide="1">
		<div id="slider_left"></div>
		<div id="slider_right"></div>
		<ul>
			<li><img src="http://img-fotki.yandex.ru/get/3310/bonoooooo.3e/0_72e7_751c95a0_XL.jpg" alt="" /><p>Some text 1</p><button>Some button 1</button></li>
			<li><img src="http://www.yakako.ru/uploads/posts/2010-07/1280067323_priroda-oboi-02.jpg" alt="" /><p>Some text 2</p><button>Some button 2</button></li>
			<li><img src="http://img-fotki.yandex.ru/get/3310/bonoooooo.3e/0_72e7_751c95a0_XL.jpg" alt="" /><p>Some text 3</p><button>Some button 3</button></li>
			<li><img src="http://www.yakako.ru/uploads/posts/2010-07/1280067323_priroda-oboi-02.jpg" alt="" /><p>Some text 4</p><button>Some button 4</button></li>
		</ul>
	</div>
	<div class="opacity" id="leftOpacity"></div>
	<div class="opacity" id="rightOpacity"></div>
	</div>
<script>
    (function($) {
	$.fn.slide = function() {
		$(document).ready(function() {
		var lengthSlides = $("#slider ul li").length;
		var widthSlide = $("#slider ul li").width();
		var widthSlides = widthSlide * lengthSlides;
		$("#slider ul").width(widthSlides);
		var inter = setInterval(nextSlide,3000);
		$("#slider").hover(function() {
			clearInterval(inter);
		}, function() {
			inter = setInterval(nextSlide,3000);
		});
		$("#slider_left").click(prevSlide);
		$("#slider_right").click(nextSlide);
		function nextSlide () {
				var currentSlide = $("#slider").data('slide');

				if ( currentSlide == lengthSlides ) 
					currentSlide = 0;
				$("#slider ul").animate({
										'left': - (currentSlide * widthSlide)
										}, 700);
				currentSlide++;
				$("#slider").data('slide',currentSlide);
		}
		function prevSlide () {
				var currentSlide = $("#slider").data('slide') - 1;
				if ( currentSlide == 0 ) 
					currentSlide = lengthSlides;
				$("#slider ul").animate({
										'left': - ((currentSlide - 1) * widthSlide)
										},...

CSS

* {margin:0; padding:0; border:0; outline: 0;}

#slider {
	width: 800px;
	height: 600px;
	margin: 0 auto;
	position: relative;
}
	#slider ul {
		position: absolute;
		top: 0;
		left: 0;
	}
		#slider li {
			width: 800px;
			height: 600px;
			list-style: none;
			float: left;
		}
	#slider_left, #slider_right {
		width: 128px;
		height: 600px;
		z-index: 2;
		cursor: pointer;
		opacity: 0;
	}
	#slider_left {
		background: url("images/left.png") no-repeat 0% 50%;
		position: absolute;
		left: 0;	
	}
	#slider_right {
		background: url("images/right.png") no-repeat 0% 50%;
		position: absolute;
		right: 0;

	}
		#slider_left:hover, #slider_right:hover {
			opacity: 1;
		}

#slider ul li p {
	position: relative;
	top: -90px;
	color: red;
	font-size: 30px;
}

#slider ul li button {
	position: relative;
	top: -150px;
	font-size: 30px;
}

#sliderWrapper {
	width: 1100px;
	height: 600px;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
}

#leftOpacity {
	position: absolute;
	top: 0;
	left: 0;
	
}

#rightOpacity {
	position: absolute;
	top: 0;
	right: 0;
}

.opacity {
	background: #fff;
	opacity: 0.4;
	height: 600px;
	width: 150px;
}