разбираться в чужом коде это неблагодарная работа, поэтому мне проще написать свой:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ГГ</title>
<style>
* {
margin:0;
padding: 0;
outline: none;
}
.headersliderleftclick {
position: absolute;
top: 230px;
left: -210px;
width: 115px;
height: 115px;
background: url(http://www.jpeghost.ru/i/1272282284_2701_r7j/10_zb3.png);
cursor: pointer;
opacity: 0.6;
}
.headerslider {
box-sizing: border-box;
margin: 0 20px;
position: relative;
width: 560px;
height: 500px;
margin-left: 200px;
}
.headeroneslide {
position: relative;
width: 566px;
height: 339px;
top: 100px;
left: 0;
overflow: hidden;
}
.headersliderholder {
box-sizing: border-box;
position: relative;
left: 0;
transition: all 1s ease;
width: 1698px;
height: 339px;
}
.headerslide {
float: left;
box-sizing: border-box;
width: 566px;
height: 339px;
background-repeat: no-repeat;
background-size: 573px 100%;
}
.first {
background-image: url(http://talklove.ru/priroda/priroda-7.jpg);
}
.second {
background-image: url(http://www.svoiludi.ru/images/tb/9844/priroda-i-vina-patagonii-tur-13724291688487_w990h700.jpg);
}
.third {
background-image: url(http://svet-vnutri.ru/wp-content/uploads/2014/03/68074.jpg);
}
.headerslide div {
width: 100%;
float: left;
height: 109px;
margin-left: 0;
margin-top: 0;
background: rgba(20, 20, 20, 0.69);
margin-top: 230px;
padding-left: 22px;
padding-right: 20px;
box-sizing: border-box;
padding-top: 10px;
}
.headslidetext h1 {
font-size: 26px;
color: white;
letter-spacing: -1px;
}
.headslidetext p {
font-size: 13px;
color: white;
}
.headersliderrightclick {
position: absolute;
top: 230px;
left: 666px;
width: 115px;
height: 115px;
background: url(http://www.jpeghost.ru/i/1272282284_2701_r7j/06_o9f.png);
background-position: 100% 50%;
cursor: pointer;
}
</style>
</head>
<body>
<div class="headerslider">
<div class="headersliderleftclick"></div>
<div class="headeroneslide">
<div class="headersliderholder" number='1'>
<div class="headerslide first">
<div class="headslidetext">
<h1>название акции</h1>
<p>Равным образом постоянное информационно-пропагандистское обеспечение нашей деятельности представляет</p>
</div>
</div>
<div class="headerslide second">
<div class="headslidetext">
<h1>название акции 2</h1>
<p>Равным образом постоянное информационно-пропагандистское обеспечение нашей деятельности представляет</p>
</div>
</div>
<div class="headerslide third">
<div class="headslidetext">
<h1>название акции 3</h1>
<p>Равным образом постоянное информационно-пропагандистское обеспечение нашей деятельности представляет</p>
</div>
</div>
</div>
</div>
<div class="headersliderrightclick"></div>
</div>
<script>
function slider() {
var leftClick = document.querySelector('.headersliderleftclick');
var rightClick = document.querySelector('.headersliderrightclick');
leftClick.onclick = function() {
var headerSliderHolder = document.querySelector('.headersliderholder');
var headerSliderHolderValue = headerSliderHolder.getAttribute('number');
if (headerSliderHolderValue == 1)
return;
var headerSliderHolderStyle = getComputedStyle(headerSliderHolder);
if (headerSliderHolderValue > 1) {
console.log(headerSliderHolderValue);
if (+headerSliderHolderValue === 3)
rightClick.style.opacity = '1';
if (+headerSliderHolderValue === 2) {
leftClick.style.opacity = '0.6';
}
headerSliderHolder.setAttribute('number', +headerSliderHolderValue - 1 + '');
headerSliderHolder.style.left = parseInt(headerSliderHolderStyle.left) + 566 + 'px';
}
}
rightClick.onclick = function() {
var headerSliderHolder = document.querySelector('.headersliderholder');
var headerSliderHolderValue = headerSliderHolder.getAttribute('number');
if (headerSliderHolderValue == 3)
return;
var headerSliderHolderStyle = getComputedStyle(headerSliderHolder);
if (headerSliderHolderValue < 3) {
if (+headerSliderHolderValue === 1)
leftClick.style.opacity = '1';
if (+headerSliderHolderValue === 2) {
rightClick.style.opacity = '0.6';
}
headerSliderHolder.setAttribute('number', +headerSliderHolderValue + 1 + '');
headerSliderHolder.style.left = parseInt(headerSliderHolderStyle.left) - 566 + 'px';
}
}
}
slider();
</script>
</body>
</html>