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();
});

Answer 1

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

Answer 2

First thank you for those custom pagination tabs, I used your code but I had the same problem : I could only click once on those paginations, here is the solution that worked for me. Add your changing slide in "onTransitionEnd" callback

onTransitionEnd: function(){
                $('.slider-tab').on('click', function(){ //slider-tab is a single tab
                    var target = $(this).data('index');
                    blockSwiper.slideTo(target);
                    return;
                })
            }

and the full code

$( document ).find('.block-swiper').each(function (index) {
        var $this = $(this);
        var swiperTabs = $(this).find('.swiper-tabs');
        var blockSwiper = new Swiper($this, {
            pagination: swiperTabs,
            paginationClickable: true,
            paginationType: 'custom',
            slidesPerView: 1,
            loop:true,
            paginationCustomRender: function(swiper, current, total) {
                var names = [];
                var icons = [];
                $this.find(".swiper-slide").each(function(i) {
                    names.push($(this).data("name"));
                    icons.push($(this).data("icon"));
                });
                var text = "<div>";
                for (let i = 1; i <= total; i++) {
                    if (current != i) {
                        text += "<div class='slider-tab' data-index='"+i+"'>"  + "<i class='fa " + icons[i-1] + " aria-hidden='true'></i>" + names[i-1] + "</div>";
                    } else {
                        text += "<div class='slider-tab active' data-index='"+i+"'>" + "<i class='fa " + icons[i-1] + " aria-hidden='true'></i>" + names[i-1] + "</div>";
                    }
                }
                text += "</div>";
                return text;
            },
            onTransitionEnd: function(){
                $('.slider-tab').on('click', function(){
                    var target = $(this).data('index');
                    blockSwiper.slideTo(target);
                    return;
                })
            }
        });



    }); 

`