Quiero hacer una navegación, que se vea como 1/5, luego 2/5, luego 3/5 y así sucesivamente.
Por el momento, todo funciona, excepto el número de la página actual: se crea, pero la anterior no se elimina.
¡Gracias de antemano!
// slides let item = document.querySelectorAll('.item'); let btn = document.querySelector('.btn'); let el_active; let current = document.querySelector('.current'); let total = document.querySelector('.total'); function navigate() { for (let i = 0, length = item.length; i < length; i++) { if (item[i].classList.contains('active')) { el_active = i; current.append(i + 2); 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', function() { navigate(); sliceAll() }); let all = item.length; total.append(all); .item { display: none; } .item.active { display: block; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <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">1</span> / <span class="total"></span> </div> <br> <button class="btn" type="button">Next</button> </body> </html>Debe usar textContent en lugar de append , ya que append agregará pero no restablecerá el valor anterior.
// slides let item = document.querySelectorAll('.item'); let btn = document.querySelector('.btn'); let el_active; let current = document.querySelector('.current'); let total = document.querySelector('.total'); function navigate() { for (let i = 0, length = item.length; i < length; i++) { if (item[i].classList.contains('active')) { el_active = i; current.textContent = (i + 2); 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', function() { navigate(); sliceAll() }); let all = item.length; total.append(all); .item { display: none; } .item.active { display: block; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <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">1</span> / <span class="total"></span> </div> <br> <button class="btn" type="button">Next</button> </body> </html>