Задать вопрос
  • Как добавить в слайды их номера и общее количество?

    0xD34F
    @0xD34F
    Куда надо выводить номера слайдов:

    const counterSelector = 'селектор элементов внутри слайдов, где должны отображаться их номера';

    Выводим:

    document.querySelectorAll(counterSelector).forEach((n, i, a) => {
      n.textContent = `${i + 1} / ${a.length}`;
    });

    Это если делать до инициализации слайдера (const swiper = new Swiper(...);), или среди его настроек отсутствует loop: true. В противном случае для вычисления количества слайдов придётся отбросить дубликаты, а индексы надо будет доставать из data-атрибута (UPD. Неактуально, начиная с девятой версии - дублирования слайдов больше нет):

    const slidesCount = swiper
      .slides
      .filter(n => !n.matches('.swiper-slide-duplicate'))
      .length;
    
    swiper.slides.forEach(n => n
      .querySelector(counterSelector)
      .innerText = `${-~n.dataset.swiperSlideIndex} / ${slidesCount}`
    );
    Ответ написан
    1 комментарий