Как добавить текст в пагинацию Swiper?

Как можно кастомизировать пагинацию, чтобы она выглядела так, как на изображении?
  • 9 февраля 2025 г. 18:24
Ответы на вопрос 1
Для кастомизации пагинации в Swiper и добавления текста, вы можете использовать свойство `pagination` для определения кастомного элемента пагинации. Чтобы добавить текст, вы можете использовать JavaScript для манипуляции с элементами пагинации после инициализации Swiper.

Вот пример того, как это можно сделать:

1. В HTML создайте элемент для пагинации:

```html
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Слайд 1</div>
    <div class="swiper-slide">Слайд 2</div>
    <div class="swiper-slide">Слайд 3</div>
  </div>
  <!-- Пагинация -->
  <div class="swiper-pagination"></div>
</div>
```

2. Инициализируйте Swiper в JavaScript:

```javascript
const swiper = new Swiper('.swiper-container', {
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
    renderBullet: function (index, className) {
      return '<span class="' + className + '">' + (index + 1) + '</span>';
    },
  },
});
```

Этот код добавляет номер слайда в пагинации. `renderBullet` позволяет вам кастомизировать каждый элемент пагинации.

3. Добавьте стили для пагинации, чтобы она выглядела так, как вам нужно:

```css
.swiper-pagination {
  display: flex;
  justify-content: center;
  margin-top: 10px; /* Можете подкорректировать отступы */
}

.swiper-pagination span {
  width: 30px; /* Задайте ширину для каждого элемента */
  height: 30px; /* Задайте высоту */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%; /* Круглая форма */
  background-color: #ccc; /* Цвет фона */
  color: #fff; /* Цвет текста */
  margin: 0 5px; /* Отступ между элементами */
  cursor: pointer; /* Указатель при наведении */
  transition: background-color 0.3s; /* Плавный переход */
}

.swiper-pagination span:hover {
  background-color: #999; /* Цвет при наведении */
}

.swiper-pagination .swiper-pagination-bullet-active {
  background-color: #007aff; /* Цвет активного элемента */
}
```

С помощью этого кода вы сможете кастомизировать пагинацию в Swiper так, как вам нужно, и добавить любой текст. Вы можете также адаптировать стили и HTML в зависимости от ваших требований.
Похожие вопросы