Для кастомизации пагинации в 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 в зависимости от ваших требований.