JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
</head>
<body>
	<div class="slider">
		<div class="cover first">
			<div class="right">
			</div>
			<div class="slide">
				<img src="http://92.r.photoshare.ru/00922/008cb2f8a3feb8a4ffd36adfa0af23271c20dd68.jpg">
				<p class="tx1">Текст 1</p>
			</div>
		</div>
		<div class="cover second">
			<div class="right">
			</div>
			<div class="slide">
				<img src="http://cs10043.userapi.com/u40192976/-14/z_1686f70c.jpg">
				<p class="tx1">Текст 2</p>
			</div>
		</div>
		<div class="cover third">
			<div class="right">
			</div>
			<div class="slide">
				<img src="http://static.diary.ru/userdir/1/6/6/1/1661848/76283989.jpg">
				<p class="tx1">Текст 3</p>
			</div>
		</div>
	</div>

  </body>

CSS

.slider {
    height: 405px;
	overflow:hidden;
	position:relative;
}
.slider>*{position:absolute;}
.slider > *:first-child {
    z-index: 2;
}
.cover > div {
    height: 405px;
    margin: 0 auto;
    position: relative;
    width: 1000px;
}
.cover div > * {
    display: block;
    position: absolute;
}
.cover {
    background-color: #fff500;
	left:0;
	position: absolute;
	width: 100%;
}
.cover p{
	color: #fff;
	left: 590px;
    top: 290px;
    text-align: left;
    width: 405px;
}
.cover p.tx1 {
    font-size: 50px;
    font-weight: bold;
    text-shadow: 1px 1px #000000;
}

.first {
    margin-left: 0;
	padding-left:0;
}
.cover .right {
    background-color: #cccccc;
	float: right !important;
	left: 50%;
	position: absolute;
	width: 50% !important;
}
.switcher {
    height: 40px;
    left: -2px;
    margin: 0 auto;
    position: relative;
    top: 358px;
    width: 988px;
    z-index: 3;
}
.switcher>*{
	cursor:pointer;
	display:inline-block;
	height:inherit;
	position: relative;
	width: 40px;

}
.switcher .prev{left:0; top:0;background: url("http://www.maine.gov/mema/images/icons/actions-go-previous-icon.gif") no-repeat;}
.switcher .next{left:907px; top:0;background: url("http://www.maine.gov/mema/images/icons/actions-go-next-icon.gif") no-repeat;}

JavaScript

//слайдер баннера

var slider = function () {
    var w = 0;
    var switcher = $('<div class="switcher"/>');
    return {
        current: 0,
        target: 0,
        max: 0,
        slideshow: 10000,
        slideShowStop: true,
        interval: null,
        inProgress: false,
        init: function () {
            w = $('.slider .cover:first').width();
            $('.slider .cover:not(.slider .cover:first)').css('left', w);
            this.max = $('.slider .cover').length - 1;
            $('<div class="prev"/>').click(function () {
                slider.prev()
            })
                .appendTo(switcher);
            $('<div class="next"/>').click(function () {
                slider.next()
            })
                .appendTo(switcher);
            switcher.appendTo($('.slider'));
            this.restartInterval();
        },
        restartInterval: function () {
            if (this.slideshow == 0) return;
            if (this.interval != null) clearTimeout(this.interval);
            this.interval = setTimeout(function () {
                slider.next()
            }, this.slideshow)
            if (this.current == this.max && this.slideShowStop) this.slideshow = 0;
        },
        next: function (target) {
            if (this.inProgress) return;
            this.inProgress = true;
            if (target !== undefined) this.target = target;
            else this.target = this.current + 1;
            if (this.target > this.max) this.target = 0;
            $('.slider .cover:first').animate({
                left: -w
            }, {
                step: function (now) {
                    $(this).next().css('left', now + w)
                },
                complete: function () {
                    $(this).insertAfter('.slider .cover:last').css('left', w);
                    if (++slider.current > slider.max) slider.current = 0;
                    if (slider.target != slider.current) slider.next(slider.target)
               ...