Работа над слайдером, кнопки управления

Question


   var slide = document.getElementsByClassName('slide');

   var next = document.getElementsByClassName('slide-next')[0];
   var prev = document.getElementsByClassName('slide-prev')[0];

   var slideIndex = 0;


   var i = 0;
   var slideRun  = setInterval(
     function() {
       slide[(i++) % slide.length].classList.add('active');
       slide[(i - 2 + slide.length) % slide.length].classList.remove('active');
     }
   , 5000);

   var slideNext = function(event){
       slide[(i++) % slide.length].classList.add('active');
       slide[(i - 2 + slide.length) % slide.length].classList.remove('active');

   }

   var slidePrev = function(event){
       slide[(i + 2 - slide.length) % slide.length].classList.remove('active');
   }

   next.addEventListener('click',slideNext);
   prev.addEventListener('click',slidePrev);

next работает отлично, а вот с prev возникли проблемы.да, и ещё: можно ли стилизовать переход слайдера:скорость, плавность и т.д?

Answer 1

var slideNext = function(event){
  [...slide].forEach(s => s.classList.remove('active'));

  slide[i].classList.add('active');
  i = (i + 1) % slide.length;
}

var slidePrev = function(event){
  [...slide].forEach(s => s.classList.remove('active'));

  i = (i - 2 + slide.length) % slide.length;
  slide[i].classList.add('active');
  i = (i + 1) % slide.length;
}

БЛОГ НА HUSL

Работа над слайдером, кнопки управления

Ответы (1 шт):