Question

我正在使用Swiper并想要自定义分页。这个问题得到了回答here，但我误解了，如何使分页可点击，没有任何效果。我做错了什么？

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

不同之处在于我将.swiper-pagination div放在.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

这很简单，试试吧：

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

我试过这个，它适用于swiper，循环设置为true，如果循环设置为false，只需从索引中删除+1即可。

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

Swiper

2 个答案: