I have a working Swiper setup with pagination, however I want to give each of the pagination buttons a custom class. This is rather trivial to do, but I was wondering if Swiper provided this capability? Ideally each of the Swiper slides would have a classname and as the pagination is generated it could pull each slide's classname. If you look at the JADE below, ideally I would be able to pull the classes 'serve', 'tithe', 'engage', 'practice', and 'share' from each slide and apply it to the respective pagination element. The HTML is flexible so if this is possible and the classes need to be somewhere else I can do that. Here is what my code looks like:

JADE

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

I have a working Swiper setup with pagination, however I want to give each of the pagination buttons a custom class. This is rather trivial to do, but I was wondering if Swiper provided this capability? Ideally each of the Swiper slides would have a classname and as the pagination is generated it could pull each slide's classname. If you look at the JADE below, ideally I would be able to pull the classes 'serve', 'tithe', 'engage', 'practice', and 'share' from each slide and apply it to the respective pagination element. The HTML is flexible so if this is possible and the classes need to be somewhere else I can do that. Here is what my code looks like:

JADE

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

• javascript
• swiper.js

2 Answers 2

So it doesn't seem that there is a built in way to do this but my solution was to give each slide a data-class attribute with the class I want to apply to the respective pagination element. Then I modified the paginationBulletRender function to pull that attribute and apply it to the class of the pagination element.

JADE

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

I found out, that the sorder of icons is shifted to the slides if you try to use individual icons for each slide, which I provide in a html data attribute, so I decided to resolve it like so:

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