Swiper: Custom pagination based on slide data attribute

[carlosnpz]

Hey guys!
Is it possible to use paginationBulletRender parameter to get data attribute from each .swiper-slide and put it on .swiper-pagination-bullet as its text? Couldn't find anything like this...

[jamespstyles]

If you are using the latest version of swiper the paginationBulletRender method does not exist but something like this will work.

First create an empty titles array and fill it with the titles you want to use. Do this before we create a new Swiper

    var titles = [];
    $('.swiper-container .swiper-slide').each(function(i) {
      titles.push($(this).data('title'))
    });

    var mySwiper = new Swiper ('.swiper-container', { ...

Then use 'pagination' and 'renderBullet' as per the http://idangero.us/swiper/api/ and reference the titles array inside the renderBullet.

      var mySwiper = new Swiper ('.swiper-container', {
      // Optional parameters
      loop: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
        renderBullet: function (index, className) {
          return '<span class="tab__link ' + className + '">' + titles[index] + '</span>';
        },
      },

    });

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.