JSFiddle - React, Tailwind, and code Playground

by petroveg

HTML

<div class="slide" data-container="slide">
	<ul class="slide-list" data-target="slide">
		<li class="slide-item" data-item="slide">
			<img src="http://tequilla.me/assets/image/slider/slider_discovery.jpg">
		</li>
		<li class="slide-item active" data-item="slide">
			<img src="http://tequilla.me/assets/image/slider/slider_maserati.jpg">
		</li>
		<li class="slide-item" data-item="slide">
			<img src="http://tequilla.me/assets/image/slider/slider_googlenow.jpg">
		</li>
	</ul>
	<span class="slide-trigger prev" data-action="slide" data-direction="-1">нозад</span>
	<span class="slide-trigger next" data-action="slide" data-direction="1">фпирёд</span>
</div>

CSS

html{
	background:#fff;
	color:#000;
}
body{
	margin:0;
}
.slide{
	position:relative;
	width:900px;
	height:500px;
	margin:auto;
}
.slide-list{
	position:relative;
	overflow:hidden;
	height:100%;
	margin:0;
	list-style:none;
}
.slide-item{
	overflow:hidden;
	position:absolute;
	top:0;
	left:0;
	width:0;
	height:100%;
}
.slide-item.active{
	z-index:1;
}
.slide-trigger{
	overflow:hidden;
	position:absolute;
	z-index:2;
	top:50%;
	width:100px;
	height:100px;
	margin:-50px 0 0;
	border-radius:100%;
	text-indent:-1000px;
	background:rgba(255, 255, 255, .1);
	-webkit-transition:.2s;
	-moz-transition:.2s;
	-ms-transition:.2s;
	-o-transition:.2s;
	transition:.2s;
	cursor:pointer;
}
.slide-trigger:hover{
	background:rgba(255, 255, 255, .3);
}
.slide-trigger:before,
.slide-trigger:after{
	content:"";
	position:absolute;
	top:35%;
	background:rgba(255, 255, 255, .2);
}
.slide-trigger:before{
	width:40%;
	height:2px;
}
.slide-trigger:after{
	height:40%;
	width:2px;
}
.slide-trigger:hover:before,
.slide-trigger:hover:after{
	background:rgba(255, 255, 255, .5);
}
.slide-trigger.prev{
	left:20px;
	transform:rotate(-45deg);
}
.slide-trigger.prev:before,
.slide-trigger.prev:after{
	left:35%;
}
.slide-trigger.next{
	right:20px;
	transform:rotate(45deg);
}
.slide-trigger.next:before,
.slide-trigger.next:after{
	right:35%;
}

JavaScript

$(function () {
	var $container = $('[data-container~="slide"]'),
		$list = $container.find('[data-target~="slide"]'),
		$items = $container.find('[data-item~="slide"]'),
		count = $items.length,
		index = 0;

	$items.eq(index).addClass('active').css({
		width: "100%"
	});

	$container.on('click', '[data-action~="slide"]', function (e) {
		var index_ = (count + index + $(this).data('direction') * 1) % count;

		$items.eq(index)
			.finish()
			.removeClass('active');

		$items.eq(index_)
			.addClass('active')
			.animate(
				{
					width: "100%"
				},
				400,
				function () {
					$items.eq(index)
						.css({
							width: 0
						});
					index = index_;
				}
			);
	});
});