swiper自定义分页只滑动一次

Question

我用 swiper 制作了一个非常简单的图像滑块，然后使用滑动器的 "paginationCustomRender" jQuery 和数据属性添加了自定义分页，它生成的分页效果很好，滑动时一切正常，但它不可点击，所以我添加了一个小功能来告诉我的滑块 "slideTo()" 当点击分页中的一个标签时目标幻灯片，但它只工作一次，然后该功能将不会再次启动。我搜索了一下，发现大多数人没有使用 swiper 的内置选项，而是自己制作的，所以我想知道我应该做什么以及最好的方法是什么。

提前致谢

这是我的 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>

这里是 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

我喜欢 swiper，但有时使用它真的很痛苦 iDangero 小组似乎需要做一些改变，因为目前这个插件不支持全功能的自定义分页，

所以这是我的解决方案：

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

如果您发现错误或其他问题，请告诉我

Answer 2

首先感谢您提供这些自定义分页选项卡，我使用了您的代码但遇到了同样的问题：我只能在这些分页上单击一次，这是对我有用的解决方案。在 "onTransitionEnd" 回调

中添加您的更改幻灯片

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

和完整代码

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



    });

`

swiper自定义分页只滑动一次

swiper custom pagination only slides once

jquery

slider

swiper