const slider = document.getElementById('slider');

if(slider != undefined) {
  const slides = document.querySelectorAll('.slide');
  if(slides.length > 1) {
    let idx = 0;

    const control_prev = document.querySelector('.control__prev')
    const control_next = document.querySelector('.control__next')


    const nextSlide = () => {

      idx++;
      if (idx > slides.length - 1) {
        idx = 0;
      }
      changeSlide(idx);
    }

    const prevSlide = () => {
      idx--;
      if(idx < 0) {
        idx = slides.length - 1;
      }
      changeSlide(idx);
    }

    control_prev.onclick = e => {
      e.preventDefault();
      prevSlide()
    };
    control_next.onclick = e => {
      e.preventDefault();
      nextSlide()
    };

    const changeSlide = (current_slide) => {
      clearInterval(timer);
      slides.forEach(element => {
          element.classList.remove('slide--is-active');
      });
      slides[current_slide].classList.add('slide--is-active');
      timer = setInterval(nextSlide, 5000)
    }
    let timer = setInterval(nextSlide, 5000)
  }

}