滑动分页自定义类

Question

我有一个带分页的工作 Swiper 设置，但是我想给每个分页按钮一个自定义 class。这是相当微不足道的事情，但我想知道 Swiper 是否提供了这种能力？理想情况下，每张 Swiper 幻灯片都有一个 class 名称，并且在生成分页时它可以拉出每张幻灯片的 class 名称。如果您查看下面的 JADE，理想情况下我可以拉出 classes 'serve'、'tithe'、'engage'、'practice' 和 'share' 从每张幻灯片并将其应用于相应的分页元素。 HTML 是灵活的，所以如果这可能并且 classes 需要在其他地方，我可以做到这一点。这是我的代码的样子：

玉

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 属性，我想将 class 应用于各自的分页元素。然后我修改了 paginationBulletRender 函数以拉取该属性并将其应用于分页元素的 class。

翡翠

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

滑动分页自定义类

Swiper Pagination Custom Classes

javascript

swiper

滑动分页自定义 类

Swiper Pagination Custom Classes

javascript

swiper

滑动分页自定义类