Подскажите пожалуйста, как отобразить номер текущего "слайда"?
Данным образом мне необходимо реализовать навигацию: текущая страница / общее количество страниц.
На данный момент я сделал все кроме навигации, что-то никак с ней не разберусь.
Может быть есть несложное решение?
Заранее благодарю!
HTML
<body>
<div class="items">
<div class="item active">111</div>
<div class="item">222</div>
<div class="item">333</div>
<div class="item">444</div>
<div class="item">555</div>
</div>
<br>
<div class="nav">
<span class="current"></span> /
<span class="total"></span>
</div>
<br>
<button class="btn" type="button">Next</button>
</body>
CSS
.item {
display: none;
}
.item.active {
display: block;
}
JS
// slides
let item = document.querySelectorAll('.item');
let btn = document.querySelector('.btn');
let el_active;
function navigate() {
for (let i = 0, length = item.length; i < length; i++) {
if (item[i].classList.contains('active')) {
el_active = i;
break;
}
}
item.forEach(function(tab) {
tab.classList.remove('active');
});
if ((el_active+1) === item.length) {
item[0].classList.add('active');
} else {
item[el_active + 1].classList.add('active');
}
}
btn.addEventListener('click', navigate);
// navigation
let current = document.querySelector('.current');
let total = document.querySelector('.total');
// current slide number
function currentNum() {
for (let i = 0, length = item.length; i < length; i++) {
let cur = document.createElement('div');
cur.className = "alert";
cur = ([i+1]);
current.append(cur);
}
}
// number of all slides
function allNum() {
for (let i = 0, length = item.length; i < length; i++) {
let all = document.createElement('div');
all.className = "alert";
all = ([length]);
total.append(all);
}
}
window.addEventListener('load', allNum);
window.addEventListener('load', currentNum);
btn.addEventListener('click', currentNum);
Если удобно, можно здесь -
https://jsfiddle.net/Logic2/nrob6eLj/64/ 
