Как решить проблему в кастомной функции рендера пагинации в Swiper когда loop: true?

Question

[biz53]

У меня есть пользовательская функция для разбиения на страницы в swiper. Но это работает неправильно, когда loop: true. Демо тут: https://codepen.io/timshaq/pen/MWoaJza

function formatFractionNumber(number) {
    return ("0" + number).slice(-2);
}

function renderCustomPagination(ev) {
    console.log(ev)
    let bullets = "";
    const current = ev.snapIndex + 1;
    const total = ev.snapGrid.length;
    for(var i = 0; i < total; i++) {
        bullets += '<div class="slider-bullet';
        if (ev.snapIndex === i) bullets += ' current';
        bullets += '"></div>';
    }
    return `
    <div class="slider-bullets">
        ${bullets}
    </div>
    <div class="slider-fraction">
        <span class="slider-fraction__current">${formatFractionNumber(current)}</span><span class="slider-fraction__total"> / ${formatFractionNumber(total)}</span>
    </div>
    `;
}

На картинке нетронутый слайдер, то есть должно быть 01/04. И когда переключаю слайды, тоже неправильно показывает, точнее не так, как хочу я.

Comments

[Сергей Сергей]

snapIndex и snapGrid работают с подготовленными элементами. Для незацикленной карусели множество подготовленных элементов совпадает с исходным. У зацикленной происходит копирование крайних групп элементов, от того индексы сбиваются. Нужно найти или вычислить индексы, отражающие перебор исходного множества элементов. Или в исходниках библиотеки посмотреть, как считается там.