How to take text from attributes for custom pagination?

Question

I used swiper.js to create the slider. You need to create a custom pagination with text. Now pagination is implemented, but I take the text from the array and substitute it into the pagination. And I need to take it from the date attribute in html. How can i do this?

const swiper = new Swiper(".swiper", {
  loop: true,
  pagination: {
    el: ".pag",
    clickable: true,
    renderBullet: function(index, className) {
      return (
        '\
        <div class="pag-container ' +
        className +
        '">\
        <div class="pag-num">' +
        (index < 10 ? "0" + (index + 1) : index + 1) +
        '</div>\
        <div class="pag-text">' +
        menu[index] +
        "</div>\
        </div>"
      );
    },
  },
});

<div class="swiper-wrapper">
  <div class="swiper-slide" data-name="TITLE1"></div>
  <div class="swiper-slide" data-name="TITLE2"></div>
  <div class="swiper-slide" data-name="TITLE3"></div>
  <div class="swiper-slide" data-name="TITLE4"></div>
</div>

`element.dataset.name` as long as you have the element ([mdn](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes)) — Diego D, Aug 26 '22 at 12:26

score 1 · Accepted Answer · answered Aug 26 '22 at 13:25

Store your slides in const and access them when render pagination.

const slides = document.querySelectorAll('.swiper-slide');
const swiper = new Swiper(".swiper", {
  loop: true,
  pagination: {
    el: ".pag",
    clickable: true,
    renderBullet: function(index, className) {
      return (
        '\
        <div class="pag-container ' +
        className +
        '">\
        <div class="pag-num">' +
        (index < 10 ? "0" + (index + 1) : index + 1) +
        '</div>\
        <div class="pag-text">' +
        slides[index].dataset.name +
        "</div>\
        </div>"
      );
    },
  },
});

How to take text from attributes for custom pagination?

1 Answers1