Как у слайдера Swiper реализовать пагинацию где числа будут обрезаться?

Question

[Raym0NT]

Добрый день, как можно реализовать подобное на слайдере Swiper?


Сейчас пагинация написана вот так, но выводятся все цифры без обрезания.

pagination: {
    el: ".cases__slider-pagination",
    clickable: true,
    renderBullet: function (index, className) {
      return `<span class="${className}">${index + 1}</span>`;
    },
  },

Заранее спасибо!

Answer 1

[Михаил Р.]

Моя заначка :)

const swiper = new Swiper('.swiper-container', {
  // параметры слайдера
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
    renderCustom: function (swiper, current, total) {
      let paginationHtml = "";
      const maxVisible = 3; // максимальное количество видимых элементов
      
      // добавляем первый элемент
      paginationHtml += '<span class="swiper-pagination-bullet">' + 1 + '</span>';
      
      // добавляем обрезанные числа, если их нужно показать
      if (total > maxVisible) {
        const start = current - 1;
        const end = current + 1;
        if (current < 2) {
          end += 2 - current;
        } else if (current > total - 2) {
          start -= current - (total - 3);
        }
        if (start > 1) {
          paginationHtml += '<span class="swiper-pagination-bullet">..</span>';
        }
        for (let i = start; i <= end; i++) {
          if (i > 1 && i < total) {
            paginationHtml += '<span class="swiper-pagination-bullet">' + i + '</span>';
          }
        }
        if (end < total) {
          paginationHtml += '<span class="swiper-pagination-bullet">..</span>';
        }
      } else {
        // добавляем остальные элементы
        for (let i = 2; i <= total - 1; i++) {
          paginationHtml += '<span class="swiper-pagination-bullet">' + i + '</span>';
        }
      }
      
      // добавляем последний элемент
      paginationHtml += '<span class="swiper-pagination-bullet">' + total + '</span>';
      
      return paginationHtml;
    }
  }
});

Comments

[Raym0NT]

Благодарю :)