Как в Swiper слайдере настроить внешний вид пагинации?

Question

[Cheizer]

Использую Swiper slider idangero.us/swiper/api/#pagination пагинацию по типу фракции, все работает нормально, но, согласно идее дизайнера, вам нужно добавить 0 до номера слайда, скажите, пожалуйста, как это сделать правильно? Я не силен в JS, только изучаю: (в приведенном ниже примере я пытаюсь это сделать, но он не работает так. Вернее работает отлично, но 0 не добавляется Вот поднял пример https://codepen.io/Cheizer/pen/wXaLLE
Не могу передать параметры в index и total

var slider = new Swiper($('.slider')[i], {
                pagination: {
                    el: $('#big-slider .swiper-pagination')[i],
                    type: 'fraction',
                    renderFraction: function (currentClass, totalClass, index, total) {
                        return '<span class="' + currentClass + '">0 '+ index +' </span>' +
                            ' / ' +
                            '<span class="' + totalClass + '">0 '+ total +' </span>';
                    },
                },
            });

Как по умолчанию «1 / 2».
Как я хочу в итоге что бы выглядело «01 / 02», первое число является текущий порядковый номер слайда, а второй - общее количество слайдов.
Как это реализовать?

Comments

[Никита]

а кэша нет случайно?) на глаз все впорядке, контрол ф5 не жамкали?)

[Cheizer]

Никита, Да нет, вот поднял https://codepen.io/Cheizer/pen/wXaLLE не знаю как текущий номер слайда передать, и общее количесвто

[Никита]

Роман Кузнецов, prntscr.com/jpixmy все же работает?))

Answer 1

[Anonimmus]

затем когда появится контект у вас появится новая головная боль как убрать 0.
решение у меня такое

pagination: {
        el: '.swiper-pagination',
        type: 'fraction',
        formatFractionCurrent: addZero,
        formatFractionTotal: addZero
      },

//где нить ниже 

    function addZero(num){
      return (num > 9) ? num : '0' + num;
    }

Answer 2

[Dmitriy Uvarov]

Можно попробовать так добавить 0 перед значением, не идеально конечно, но должно сработать

.swiper-pagination-current:before{
  content: "0"
}

.swiper-pagination-total:before{
  content: "0"
}

Comments

[Cheizer]

Аааааааа :)))) ГЕНИАЛЬНО! На css решить эту задачу я и не подумал :))) БЛАГОДАРЮ!

Answer 3

[Павел Седой]

formatFractionCurrent: function(number) {
if (number < 10) {
number = '0' + number;
}
return number;
},

Comments

[SergVedenyapin]

спасибо, помогло. Хоть и очевидно, но не дошел)) Нужно внимательнее читать документацию))