Почему не работает ООП slider?

Question

Пытаюсь сделать ООП слйдер, но возникает какая-то проблема. Ошибок в консоли нет. При нажатии на кнопку "Назад" слайдер не реагирует, что я делаю не правильно? (Был бы благодарен, если бы указали и на другие ошибки).

function Slider(sliderClass, slides, arrows, btnPerv, btnNext) {
  this.sliderWrap = document.querySelector(sliderClass);
  this.slides = document.querySelectorAll(slides);
  this.arrows = arrows;
  this.btnPerv = document.querySelector(btnPerv);
  this.btnNext = document.querySelector(btnNext);
  this.btnPerv.addEventListener('click', this.slideNext);
  this.slideNext = function() {
for ( var i = 0; i < this.slides.length; i++) {
  if (this.slides[i].classList.contains('slides-active')) {
    this.slides[i].classList.remove('slides-active');
  }
}
  }
}
var topSlider = new Slider('.slider_one', '.slider_one .slides', true, '.perv', '.next');
console.log(topSlider);

.slider_one {
  border: 2px solid black;
  margin: 20px;
  width: 600px;
  height: 300px;
  position: relative;
}

.slides {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0;
}

.slides-active {
  opacity: 1;
}

.slides-1 {
  background-color: red;
}

.slides-2 {
   background-color: blue;
}

.slides-3 {
   background-color: green;
} 

.slides-4 {
   background-color: gray;
}

<div class="slider_one">
  <div class="slides slides-1 slides-active"></div>
  <div class="slides slides-2"></div>
  <div class="slides slides-3"></div>
  <div class="slides slides-4"></div>
</div>
 <button class="perv">Назад</button>
 <button class="next">Вперед</button>


<div class="slider_two">
  <div class="slides"></div>
  <div class="slides"></div>
  <div class="slides"></div>
  <div class="slides"></div>
</div>

Ссылка на сниппет

score 3 · Accepted Answer · 2018-04-19T16:15:33.170

3

"Uncaught SyntaxError: Unexpected token var"

for

this.slideNext = function() {
  **for** ( var i = 0; i < this.slides.length; i++) {

Update

Много неправильного.

Начнем с того, что куда "назад" тут можно двигаться, если мы находимся на первом слайде?
Нет обработчика для кнопки "Вперед".
Обработчик slideNext вызывается в контексте, где не тот this. Надо:
```
this.btnPerv.addEventListener('click', this.slideNext.bind(this));
```
Обе кнопки накрыты вторым слайдером, и клики в них не попадают.
В момент выполнения this.btnPerv.addEventListener('click', this.slideNext); метод this.slideNext еще не определен, так что в addEventListener передается undefined.

И это я еще не смотрел на логику кода в обработчике.

edited Apr 19 '18 at 16:15

answered Apr 19 '18 at 15:52

В сниппете for проставлено, видимо я старую версию скопировал сюда, сейчас обновлю, но даже с for не работает – uzi_no_uzi Apr 19 '18 at 15:53
обновил сниппет на борде – uzi_no_uzi Apr 19 '18 at 15:54
спасибо, но я не делал слайдер до конца, кнопка "назад" должна была удалить всем элементам определенный класс, и всё) Остальное я пока что еще просто напросто не делал) – uzi_no_uzi Apr 19 '18 at 17:32

Почему не работает ООП slider?

1 Answers1