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

Question

[proaxi]

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

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

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

Answer 1

[0xD34F]

Кого надо пронумеровать:

const containerSelector = '.bakeries-slider';
const itemSelector = '.bakeries-slider__span';

Как пронумеровать (зависимость текста от индекса элемента):

const getNumber = i => (i + 1) + '.';
// или
const getNumber = i => `${-~i}.`;
// или
const getNumber = i => ''.concat(++i, '.');

Если использовать jquery, то индекс элемента принимает коллбек метода text:

$(containerSelector).each(function() {
  $(itemSelector, this).text((i, text) => text + getNumber(i));
});

В противном случае, есть варианты:

document.querySelectorAll(containerSelector).forEach(container => {
  const items = container.querySelectorAll(itemSelector);

  // индекс передаётся в коллбек forEach'а
  items.forEach((n, i) => n.textContent += getNumber(i));

  // или, отдаётся итератором entries
  for (const [ i, n ] of items.entries()) {
    n.appendChild(document.createTextNode(getNumber(i)));
  }

  // или, можно самостоятельно обновлять переменную с индексом
  for (let i = 0; i < items.length; i++) {
    items[i].insertBefore(new Text(getNumber(i)), null);
  }

  // причём цикл для этого не обязателен
  (function next(i, n = items.item(i)) {
    n && (n.append(getNumber(i)), next(-~i));
  })(0);
});