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>';
}
});
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 thepaginationBulletRender
function to pull that attribute and apply it to the class of the pagination element.JADE
Javascript