Как вывести номер текущего элемента в массиве?

Подскажите пожалуйста, как отобразить номер текущего "слайда"?
Данным образом мне необходимо реализовать навигацию: текущая страница / общее количество страниц.

На данный момент я сделал все кроме навигации, что-то никак с ней не разберусь.
Может быть есть несложное решение?
Заранее благодарю!

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/
  • Вопрос задан
  • 64 просмотра
Решения вопроса 2
gluck59
@gluck59
Виртуальный глюк
Добавь ID каждому диву и лови эти айдишники при присвоении класса active.
Ответ написан
zalman2
@zalman2 Автор вопроса
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы