swiper custom pagination only slides once

Question

I made a very simple image slider with swiper then added custom pagination using swiper's "paginationCustomRender" jQuery and data attributes it generates the pagination just fine and everything works when sliding but its not clickable so I added a small function to tell my slider to "slideTo()" the targeted slide when one of the labels in the pagination is clicked but it only works once and then the function will not start again. I've searched and from what I found out most people didn't use swiper's builtin options and made it themselves so I was wondering what should I do and what is the best approach to do it.

Thanks in advance

here is my HTML:

<div class="main_slider_wrapper left">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="slide_item swiper-slide" data-name="slide-1">
                        <a href="#">
                            <img src="assets/img/pages/home/main-slider/Banner1.jpg" alt="">
                        </a>
                    </div>
                    <!-- /slide_item -->
                    <div class="slide_item swiper-slide" data-name="slide-2">
                        <a href="#">
                            <img src="assets/img/pages/home/main-slider/Banner2.jpg" alt="">
                        </a>
                    </div>
                    <!-- /slide_item -->
                    <div class="slide_item swiper-slide" data-name="slide-3">
                        <a href="#">
                            <img src="assets/img/pages/home/main-slider/Banner3.jpg" alt="">
                        </a>
                    </div>
                    <!-- /slide_item -->
                </div>
                <!-- /swiper-wrapper -->
                <div class="swiper-button-prev fawesome fa-chevron-left"></div>
                <div class="swiper-button-next fawesome fa-chevron-right"></div>
                <div class="main_slider_pagination_wrapper swiper-pagination"></div>
            </div>
            <!-- /swiper-container -->
        </div>

and here is the js:

    function mainSliderFn() {
    var mainSliderElement = $('.main_slider_wrapper .swiper-container')[0];
    var mainSliderNext = $('.main_slider_wrapper .swiper-button-next')[0];
    var mainSliderPrev = $('.main_slider_wrapper .swiper-button-prev')[0];
    mainSlider = new Swiper(mainSliderElement, {
        direction: 'horizontal',
        loop: false,
        spaceBetween: 0,
        slidesPerView: 1,
        autoResize: false,
        speed: 1500,
        nextButton: mainSliderNext,
        prevButton: mainSliderPrev,

        pagination: '.main_slider_pagination_wrapper',
        paginationClickable: true,
        paginationType: "custom",
        paginationCustomRender: function(swiper, current, total) {
            var names = [];
            $(".main_slider_wrapper .slide_item").each(function(i) {
              names.push($(this).data("name"));
            });
            var text = "<span style='background-color:white;padding:20px;'>";
            for (let i = 1; i <= total; i++) {
              if (current != i) {
                text += "<span class='main_slider_label swiper-pagination-clickable' data-index='"+i+"'>" + names[i-1] + "</span>";
              } else {
                text += "<span class='main_slider_label swiper-pagination-clickable active_label' data-index='"+i+"'>" + names[i-1] + "</span>";
              }

            }
            text += "</span>";
            return text;
        },
    });   
};
function clickableLabelsFn(){
    $('.main_slider_label').on('click', function(e){
        var clicked = $(this);
        var mytarget = $(clicked).data('index');
        if(!$(clicked).hasClass('active_label'))
        {
            mainSlider.slideTo(mytarget-1);
        }
    });
};
$(document).ready(function () {
    mainSliderFn();
    clickableLabelsFn();
});

Solution

I love swiper but sometimes using it can be a real pain the butt seems like iDangero group needs to make a few changes because currently this plugin doesn't support fully functional Custom Pagination,

So here is my solution:

    function clickableLabelsFn(){

    // Making Labels
    var names = [];
    total = mainSlider.slides.length;
    activeSlide = mainSlider.activeIndex;
    var labelsWrapper = $('.main_slider_labels_wrapper');

    $(".main_slider_wrapper .slide_item").each(function(i) {
        names.push($(this).data("name"));
    });
    for( var counter = 1; counter <= total; counter++ )
    {
        if( activeSlide+1 != counter )
        {
            var labesHtml = $("<span></span>")
                            .addClass("main_slider_label")
                            .data('index', counter)
                            .text(names[counter-1]);
            labelsWrapper.append(labesHtml);
        }
        else{
            var labesHtml = $("<span></span>")
                            .addClass("main_slider_label active_label")
                            .data('index', counter)
                            .text(names[counter-1]);
            labelsWrapper.append(labesHtml);
        }
    }

    mainSlider.on('SlideChangeStart', function(){
        var current = mainSlider.activeIndex;
        $('.main_slider_label').each(function() {
            var thisLabel = $(this);
            var dataIndex = $(thisLabel).data('index');
            if(dataIndex == current+1){
                $(thisLabel).addClass('active_label');
                $(thisLabel).siblings().removeClass('active_label');
            }
        });
    });

    $('.main_slider_label').on('click', function(e){
        var clicked = $(this);
        var sliderTarget = $(clicked).data('index');
        if(!$(clicked).hasClass('active_label'))
        {
            mainSlider.slideTo(sliderTarget-1);            
        }
    });
};

If you found a bug or something please let me know

Comments

[Dan]

Thanks for the replay, how did you get this working, do you have a demo?

[Aras]

@Dan Sorry I don't, I'm pretty busy on a project right now but I'll make a demo a.s.a.p. If you're in a hurry you can make one using the sample codes I added in the question.

[Aras]

Its a smart way Thank you