Сделал простой слайдер, если листать следующий слайдер, то показываются проценты (количество просмотреных слайдов) и отображается с глюками. Если пролисать до последнего слайда, покажет 100% и если сделать шаг назад, то останется это же количество и если потом опять нажать вперёд, то покажет не все проценты, при просмотре всех слайдов. И если промотать на первый слайд, то покажет 17%, а по идеи должно быть 0. Я взял всё количество слайдов "allQuestion", узнал текущий слайд "openSlide.dataset.numberQuestion" и из этого посчитал проценты потыкать https://plnkr.co/edit/NtonRXiOYtQi42cw2aD3?p=preview HTML: <style> .next-question { border: 1px solid; margin-bottom: 20px; width: 400px; height: 400px; text-align: center; vertical-align: middle; } .open { display: block; } </style> <div></div> <div style="" class="next-question open" data-number-question="1"> Слайд 1 </div> <div style="display: none;" class="next-question" data-number-question="2"> Слайд 2 </div> <div style="display: none;" class="next-question" data-number-question="3"> Слайд 3 </div> <div style="display: none;" class="next-question" data-number-question="4"> Слайд 4 </div> <div style="display: none;" class="next-question" data-number-question="5"> Слайд 5 </div> <div style="display: none;" class="next-question" data-number-question="6"> Слайд 6 </div> <div></div> <button class="quiz-buttons__button_prev">Назад</button> <button class="quiz-buttons__button_next-text">Вперёд</button> <br><br> <span class="percent">0%</span> <span>просмотрено</span> <script> var allQuestion = document.querySelectorAll('.next-question'); var percent = document.querySelector('.percent'); var nextQuestion = document.querySelector('.quiz-buttons__button_next-text'); var prevQuestion = document.querySelector('.quiz-buttons__button_prev'); var allQuestion = document.querySelectorAll('.next-question'); function closeQuestion() { allQuestion.forEach(function (question, i) { question.style.display = 'none'; }) } function openClose(element) { var openSlide = document.querySelector('.open'); if (element == 'nextElementSibling') { var nextElement = openSlide.nextElementSibling; } else { var nextElement = openSlide.previousElementSibling; } //проценты percent.innerHTML = (openSlide.dataset.numberQuestion / allQuestion.length * 100).toFixed() + '%'; numberQuestion = openSlide.dataset.numberQuestion; if (nextElement.hasAttribute('data-number-question')) { closeQuestion(); openSlide.classList.remove('open'); nextElement.style.display = 'block'; nextElement.classList.add('open'); } } nextQuestion.addEventListener('click', function (e) { openClose('nextElementSibling'); }); prevQuestion.addEventListener('click', function (e) { openClose('previousElementSibling'); }); </script>
У тебя же указан и задействован первый элемент, data-number-question="1" как активный. При загрузке страницы никаких процессов пересчета не происходит, а только при клике на следующий и предыдущий слайд. Ты сам написал по дефолту 0%. Вернемся к нашим баранам... Максимальное число слайдов 6. Текущий слайд всегда 1. 100 * текущий / всего = 16,66 Как ты хочешь чтобы было 0%, если ты уже видишь первый слайд? Убери тогда его.. надеюсь понял ) Код (Javascript): var allQuestion = document.querySelectorAll('.next-question'); var percent = document.querySelector('.percent'); var nextQuestion = document.querySelector('.quiz-buttons__button_next-text'); var prevQuestion = document.querySelector('.quiz-buttons__button_prev'); function set_percent ( min, max ) { var min = parseInt( min ), max = parseInt( max ) var min = min <= 0 ? 1 : min; percent.innerHTML = ( 100 * min / max ).toFixed(2) + '%'; } //- Дефолт set_percent( 1, allQuestion.length ); function closeQuestion() { allQuestion.forEach(function (question, i) { question.style.display = 'none'; }); } function openClose(element) { var openSlide = document.querySelector('.open'); if (element == 'nextElementSibling') { var nextElement = openSlide.nextElementSibling; } else { var nextElement = openSlide.previousElementSibling; } if (nextElement.hasAttribute('data-number-question')) { closeQuestion(); //- Проценты set_percent( nextElement.dataset.numberQuestion, allQuestion.length ); openSlide.classList.remove('open'); nextElement.style.display = 'block'; nextElement.classList.add('open'); } } nextQuestion.addEventListener('click', function (e) { openClose('nextElementSibling'); }); prevQuestion.addEventListener('click', function (e) { openClose('previousElementSibling'); }); Проверяй)))