Блог

Я работаю с этой панелью прогресса: https://codepen.io/thegamehasnoname/pen/JewZrm

Проблема, с которой я сталкиваюсь, заключается в том, что это циклы, и то, чего я хочу достичь, это:

• остановка на последнем слайде прогресса (остановка цикла).
• если пользователь находится на последнем слайде панели прогресса после его остановки, и я нажимаю на .button-prev кнопку, он должен начинаться с предыдущего слайда, а не с первого слайда панели прогресса.

вот код:

 // swiper custom progressbar
const progressContainer = document.querySelector('.progress-container');
const progress = Array.from(document.querySelectorAll('.progress'));
const status = document.querySelector('.status');

const playNext = (e) => {
  const current = e amp;amp; e.target;
  let next;

  if (current) {
    const currentIndex = progress.indexOf(current);
    if (currentIndex < progress.length) {
      next = progress[currentIndex 1];
    }
    current.classList.remove('active');
    current.classList.add('passed');
  }

  if (!next) {
    progress.map((el) => {
      el.classList.remove('active');
      el.classList.remove('passed');
    })
    next = progress[0];
  }
  next.classList.add('active');
}

progress.map(el => el.addEventListener("animationend", playNext, false));

playNext();
 

Я попытался добавить это:

 if (current) {
   if (!next) {
     $('.progress-container div').addClass('passed');
   }
}
 

Но класс passed удаляется, и панель прогресса запускается снова.

Это js из previous button того, что у меня есть:

 $(document).on('click', ".button-prev", function() {
  $('.progress-container div.active').prev().removeClass('passed').addClass('active');
  $('.progress-container div.active').next().removeClass('active');
});
 

есть идеи о том, как этого добиться?

У вас почти есть исправление! Просто добавьте оператор return, чтобы избежать установки активных calss на первый элемент прогресса.

 if (current) {
    const currentIndex = progress.indexOf(current);
    if (currentIndex < progress.length) {
      next = progress[currentIndex 1];
    }
    current.classList.remove('active');
    current.classList.add('passed');
    
    if (!next) {
     $('.progress-container div').addClass('passed');
      return;
   }
  }