Custom pagination in Swiper - pagination

Question

i'm using Swiper and want custom pagination. This question was answered here, but i misunderstood, how to make that pagination clickable, nothing worked. What am i doing wrong?
$(document).ready(function () {
var mySwiper = new Swiper('.swiper-container', {
nextButton: '.swiper-button-next'
, prevButton: '.swiper-button-prev'
, pagination: '.swiper-pagination'
, paginationClickable: true
, paginationHide: false
, paginationType: 'custom'
, paginationElement: 'div'
, paginationCustomRender: function (swiper, current, total) {
var names = [];
$(".swiper-wrapper .swiper-slide").each(function (i) {
names.push($(this).data("name"));
});
var text = "";
for (let i = 1; i <= total; i++) {
if (current == i) {
text += "<div class='swiper-pagination-container swiper-pagination-container-active'><div class='swiper-pagination-icon swiper-pagination-icon-active'></div><div>" + names[i] + "</div></div>";
}
else {
text += "<div class='swiper-pagination-container'><div class='swiper-pagination-icon'></div><div>" + names[i] + "</div></div>";
}
}
return text;
}
});
$(".swiper-pagination-container").on("click", function () {
mySwiper.slideTo($(".swiper-pagination-container").index(this) + 1);
});
}
The difference is that i placed .swiper-pagination div outside the .swiper-wrapper:
<div class="swiper-pagination"></div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" data-name="7 сентября">Slide 1</div>
<div class="swiper-slide" data-name="10 декабря">Slide 2</div>
<div class="swiper-slide" data-name="14-23 декабря">Slide 3</div>
<div class="swiper-slide" data-name="30 декабря">Slide 4</div>
<div class="swiper-slide" data-name="5-6 февраля">Slide 5</div>
<div class="swiper-slide" data-name="8 февраля">Slide 6</div>
<div class="swiper-slide" data-name="9 февраля">Slide 7</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>

Answer 1

It's simple, try it:
window.mainSlider = new Swiper('.swiper-container', {
nextButton: '.swiper-button-next'
, prevButton: '.swiper-button-prev'
, pagination: '.swiper-pagination'
, paginationClickable: true
, paginationHide: false
paginationBulletRender : function (index, className) {
var slide = $('.' + this.wrapperClass).find('[data-name]')[index],
label = $(slide).attr('data-name');
return '<span class="' + className + '">' + (typeof label !== 'undefined' ? name : '') + '</span>';
}
});

Answer 2

I tried this, it works on swiper with loop set to true, if loop set to false, simply remove +1 from the index will do.
pagination: {
el: $('.your_class').find('.swiper-pagination'),// to find the swiper-pagination you put outside of the swiper-container
clickable: true,
renderBullet: function (index, className) {
var slider_array = [];
var el = $('.swiper-container')
el.find('[data-name]').each(function () {
slider_array.push($(this).data('name'));
});
console.log(slider_array);
return '<span class="' + className + '">' + slider_array[index + 1] + '</span>';
}
}