Как в пагинацию swiper добавить текст?

Question

[Patris546]

Необходимо кастомизировать пагинацию, как на картинке, так чтобы при смене слайда подсвечивался активный текст и бордер под ним.
Удалось найти что-то похожее:

var menu = ['North Shore', 'South Shore', 'West Shore', 'East Shore'];
   renderBullet: function(index, className) {
        return '\
          <div class="box ' + className + '">\
          <div class="bigNumber">' + (index < 10 ? '0' + (index + 1) : (index + 1)) + '</div>\
          <div class="text">' + (menu[index]) + '</div>\
          </div>';
      },

Однако возможно добиться результата, как в макете более простым путем?

Comments

[Ankhena]

https://swiperjs.com/demos#thumbs-gallery