Как сделать независимую нумерацию слайдов в различных слайдерах?

Question

[proaxi]

Нужно, чтобы номер слайда отражался внутри самого слайда.

При этом, в каждом слайдере на странице чтобы это работало индивидуально.
Сейчас работает все только в первом слайдере, даже при работе со вторым, третьим, пятым и т.д слайдерами. Слайдеров будет много однотипных. Разные классы у слайдеров сделать можно, но хотелось бы оптимальное решение на js, чтобы не писать дублирующий код в js и css.

https://codepen.io/maxxxxxxxxxxxx/pen/qBOrayK

Answer 1

[0xD34F]

$('.bakeries-slider').each(function() {
  $('.bakeries-slider__span', this).text(i => `${i + 1}.`);
});

или

for (const n of document.querySelectorAll('.bakeries-slider')) {
  n.querySelectorAll('span').forEach((m, i) => m.innerText = ++i + '.');
}

или

[].forEach.call(document.getElementsByClassName('bakeries-slider'), n => {
  const slides = n.getElementsByTagName('span');
  for (let i = 0; i < slides.length; i++) {
    slides[i].textContent = ''.concat(-~i, '.');
  }
});