Не работает слайдер на js

195

01 апреля 2018, 21:53

Добрый вечер!

Не получается создать слайдер, не могу понять в чем дело. По нажатию на стрелку current меняется, однако слайд не меняется ( 9 строка ).

Буду рад помощи.

let sliders = document.getElementsByClassName('sliders'); 
arrowLeft = document.getElementsByClassName('arrowleft'), 
  arrowRight = document.getElementsByClassName('arrowright'), 
  current = 0; 
 
function startSlide() { 
  hideSlide(); 
  arrow(); 
  sliders[current].style.display = 'block'; 
} 
 
function hideSlide() { 
  for (let i = 0; i < sliders.length; i++) { 
    sliders[i].style.display = 'none' 
  } 
} 
 
function arrow() { 
  for (let i = 0; i < arrowRight.length; i++) { 
    arrowRight[i].addEventListener('click', () => { 
      return current++ 
    }) 
  } 
  for (let i = 0; i < arrowLeft.length; i++) { 
    arrowLeft[i].addEventListener('click', () => { 
      return current-- 
    }) 
  } 
} 
startSlide(); 
 
setInterval(() => { 
  console.log(current) 
}, 1000)

* { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
} 
 
ul { 
  list-style-type: none; 
} 
 
a { 
  text-decoration: none; 
} 
 
.sliders { 
  display: flex; 
  justify-content: space-between 
} 
 
.sliders1 { 
  background-image: url('../img/1.jpg'); 
  background-size: cover; 
  background-repeat: no-repeat; 
  min-height: 100vh; 
  width: 100%; 
  background-position: center; 
} 
 
.sliders2 { 
  background-image: url('../img/2.jpg'); 
  background-size: cover; 
  background-repeat: no-repeat; 
  background-position: center; 
  min-height: 100vh; 
  width: 100%; 
} 
 
.sliders3 { 
  background-image: url('../img/3.jpg'); 
  background-size: cover; 
  background-repeat: no-repeat; 
  background-position: center; 
  min-height: 100vh; 
  width: 100%; 
} 
 
.arrowleft { 
  margin-left: 13%; 
  position: absolute; 
  left: 0; 
  top: 50%; 
  cursor: pointer; 
} 
 
.arrowright { 
  margin-right: 13%; 
  position: absolute; 
  right: 0; 
  top: 50%; 
  cursor: pointer; 
} 
 
.sliders1 { 
  background-image: url('../img/1.jpg'); 
} 
 
.sliders2 { 
  background-image: url('../img/2.jpg') 
} 
 
.sliders3 { 
  background-image: url('../img/3.jpg') 
}

<html> 
 
<head> 
  <title>Проект15</title> 
  <meta charset="utf-8"> 
  <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"> 
  <link rel="stylesheet" type="text/css" href="css/style.css"> 
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
</head> 
 
<body> 
  <div class="wrap"> 
    <div class="sliders"> 
      <div class="sliders1"> 
        <div class="arrowleft"> 
          <img src="img/left-arrow.png" alt=""> 
        </div> 
        <div class="arrowright"> 
          <img src="img/right-arrow.png" alt=""> 
        </div> 
      </div> 
    </div> 
    <div class="sliders"> 
      <div class="sliders2"> 
        <div class="arrowleft"> 
          <img src="img/left-arrow.png" alt=""> 
        </div> 
        <div class="arrowright"> 
          <img src="img/right-arrow.png" alt=""> 
        </div> 
      </div> 
    </div> 
    <div class="sliders"> 
      <div class="sliders3"> 
        <div class="arrowleft"> 
          <img src="img/left-arrow.png" alt=""> 
        </div> 
        <div class="arrowright"> 
          <img src="img/right-arrow.png" alt=""> 
        </div> 
      </div> 
    </div> 
  </div> 
  <script src="main.js"></script> 
</body> 
 
</html>