Swiper.js Pagination

Add custom names to swiper.js pagination

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.6/js/swiper.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.6/css/swiper.css">
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" data-name="Item 1">
            <p>donnée texte 1</p>
            <p>donnée texte 1</p>
            <p>donnée texte 1</p>
            <p>donnée texte 1</p>
        </div>
        <div class="swiper-slide" data-name="Item 2">
           <p>donnée texte 2</p>
            <p>donnée texte 2</p>
            <p>donnée texte 2</p>
            <p>donnée texte 2</p>
        </div>
        <div class="swiper-slide" data-name="Item 3">
             <p>donnée texte 3</p>
            <p>donnée texte 3</p>
            <p>donnée texte 3</p>
            <p>donnée texte 3</p>
        </div>
    </div>
    <div class="swiper-pagination1"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

CSS

.swiper-pagination-custom{
   position: absolute;
   top: 0;
   z-index: 100;
}

JavaScript

var names = [];
$(".swiper-wrapper .swiper-slide").each(function(i) {
    names.push($(this).data("name"));
});
var swiper1 = new Swiper('.swiper-container', {
    pagination: {
    		
        el: '.swiper-pagination1',
        type: 'custom',
    renderCustom: function(swiper, current, total) {
        var text = "<span class='pContainer' style='background-color:transparent;text-align: center;width:100%; display:block;'>";
        for (let i = 1; i <= total; i++) {
                //alert(total);
            if (current == i) {

                text += "<span style='display:inline-block;border-top:3px solid #afd869;text-align:left;margin-right:4px;width: 20%;color:#afd869;padding:5px;'  data-index='"+i+"' class='active_label slide-tab'>" + names[i-1] + "</span>";

            } 

            else {

                text += "<span style='display:inline-block;border-top:3px solid black;text-align:left; margin-right:4px;width: 20%;color:black;padding:5px;'  data-index='"+i+"' class='slide-tab'>" + names[i-1] + "</span>";
            }
        }
        text += "</span>";
        return text;
    }
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    onTransitionEnd: function(){
                $('.slide-tab').on('click', function(){
                    var target = $(this).data('index');
                    swiper1.slideTo(target);
                    return;
                })
            }
});


    $('.slide-tab').on('click', function(e){
    console.log('click')
        var clicked = $(this);
        var mytarget = $(clicked).data('index');
        console.log(mytarget);
        if(!$(clicked).hasClass('active_label'))
        {
        
            swiper1.slideTo(mytarget-1);
        }
    });