DivMan,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<style>
.next-question {
border: 1px solid;
margin-bottom: 20px;
width: 400px;
height: 400px;
text-align: center;
vertical-align: middle;
}
.next-question{
display: none;
}
.next-question.open {
display: block;
}
</style>
<div></div>
<div class="next-question" >
Слайд 1
</div>
<div class="next-question" >
Слайд 2
</div>
<div class="next-question" >
Слайд 3
</div>
<div class="next-question" >
Слайд 4
</div>
<div class="next-question" >
Слайд 5
</div>
<div class="next-question" >
Слайд 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 len = allQuestion.length;
var percent = document.querySelector('.percent');
var nextQuestion = document.querySelector('.quiz-buttons__button_next-text');
var prevQuestion = document.querySelector('.quiz-buttons__button_prev');
var index = 0;
var current = allQuestion[index];
function openClose(up) {
current.classList.remove('open');
index = (index + up + len) % len;
current = allQuestion[index];
current.classList.add('open');
percent.innerHTML = (index/(len - 1) * 100).toFixed() + '%';
}
nextQuestion.addEventListener('click', function (e) {
openClose(1);
});
prevQuestion.addEventListener('click', function (e) {
openClose(-1);
});
openClose(0)
</script>
</body>
</html>