Swiper 分页自定义类

Question

我有一个带有分页功能的 Swiper 设置，但是我想给每个分页按钮一个自定义类。这很简单，但我想知道 Swiper 是否提供了这种功能？理想情况下，每张 Swiper 幻灯片都有一个类名，并且在生成分页时，它可以提取每张幻灯片的类名。如果您查看下面的 JADE，理想情况下，我可以从每张幻灯片中提取“服务”、“十一奉献”、“参与”、“练习”和“分享”类，并将其应用于相应的分页元素。 HTML 是灵活的，所以如果这是可能的，并且类需要在其他地方，我可以做到这一点。 这是我的代码的样子：

玉

div(class="swiper-wrapper")

    div(class="swiper-slide serve")
        a(href="/serve" class="coverflow-link")
            div(class="col-sm-12")
                h1(class="text-center cf-heading") Serve

    div(class="swiper-slide tithe")
        a(href="/give" class="coverflow-link")
            div(class="col-sm-12")
                h1(class="text-center cf-heading") Tithe

    div(class="swiper-slide engage")
        a(href="/smalllgroups" class="coverflow-link")
            div(class="col-sm-12")
                h1(class="text-center cf-heading") Engage

    div(class="swiper-slide practice")
        a(href="/worshipfully" class="coverflow-link")
            div(class="col-sm-12")
                h1(class="text-center cf-heading") Practice

    div(class="swiper-slide share")
        a(href="/invite" class="coverflow-link")
            div(class="col-sm-12")
                h1(class="text-center cf-heading") Share

    div(class="swiper-button-next swiper-button-black")
        div(class="swiper-button-prev swiper-button-black")   

div(class="col-sm-12")
    div(class="swiper-pagination center-block")

Javascript

var galleryTop = new Swiper('.gallery-top', {
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 10,
        speed: 600,
        effect: 'coverflow',
        pagination: '.swiper-pagination',
        paginationClickable: true,
        paginationBulletRender: function (index, className) {
            return '<span class="' + className + '">' + (index + 1) + '</span>';
        }
    });

Answer 1

所以似乎没有内置的方法可以做到这一点，但我的解决方案是给每张幻灯片一个 data-class 属性，其中包含我想应用于相应分页元素的类。然后我修改了paginationBulletRender 函数以提取该属性并将其应用于分页元素的类。

翡翠

div(class="swiper-slide" data-class="serve")
        a(href="/serve" class="coverflow-link")
            div(class="col-sm-12")
                h1(class="text-center cf-heading") Serve
                h2(class="text-center cf-subheading") Sign up for ministry

    div(class="swiper-slide" data-class="tithe")
        a(href="/give" class="coverflow-link")
            div(class="col-sm-12")
                h1(class="text-center cf-heading") Tithe
                h2(class="text-center cf-subheading") Give

    div(class="swiper-slide" data-class="engage")
        a(href="/smalllgroups" class="coverflow-link")
            div(class="col-sm-12")
                h1(class="text-center cf-heading") Engage
                h2(class="text-center cf-subheading") Sign up for a smallgroup

    div(class="swiper-slide" data-class="practice")
        a(href="/worshipfully" class="coverflow-link")
            div(class="col-sm-12")
                h1(class="text-center cf-heading") Practice
                h2(class="text-center cf-subheading") Receive our daily devotional

    div(class="swiper-slide" data-class="share")
        a(href="/invite" class="coverflow-link")
            div(class="col-sm-12")
                h1(class="text-center cf-heading") Share
                h2(class="text-center cf-subheading") Invite a friend

Javascript

paginationBulletRender: function (index, className) {
    var slide = $('.' + this.wrapperClass).find('.swiper-slide')[index];
    return '<span class="' + className + ' ' + $(slide).attr('data-class') + '">' + (index + 1) + '</span>';
}

Answer 2

我发现，如果您尝试为每张幻灯片使用单独的图标（我在 html 数据属性中提供），则图标的顺序会转移到幻灯片上，因此我决定像这样解决它：

var mySwiper = new Swiper ('.swiper-container', {
            loop: true,
            speed: 800,

            pagination: '.swiper-pagination-top',
            paginationClickable: true,
            paginationBulletRender: function (index, className) {
                var count = jQuery('.' + this.wrapperClass).find('.swiper-slide').length;
// I am avoiding this double alocation in product version, its here to see how little to change the script from Michael
                var slide = jQuery('.' + this.wrapperClass).find('.swiper-slide')[(index+1)%count];//here is the "magic"

                return '<img class="'+className+' swiper-bullet" src="'+ jQuery(slide).data('icon') + '" />';
            },
            nextButton: '#next-slide'
          });