Michael Hamilton Michael Hamilton - 25 days ago 13
Javascript Question

Swiper Pagination Custom Classes

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

Answer

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