Чтобы исправить проблемы с пагинацией в SwiperJS и изменить ее отображение, чтобы она выглядела как "3/6" и "6/6", вы можете использовать пользовательскую пагинацию. В SwiperJS есть возможность использовать различные форматы пагинации, и вы можете легко настроить отображение текущего слайда и общего количества слайдов.
Вот пример того, как это можно реализовать:
1. Убедитесь, что вы подключили SwiperJS в вашем проекте.
2. Настройте ваш слайдер, добавив пользовательскую пагинацию.
Пример кода:
```html
<!-- HTML структура -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
</div>
<!-- Пагинация -->
<div class="swiper-pagination"></div>
</div>
<!-- Подключение библиотеки Swiper -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
type: 'custom',
renderCustom: function (swiper, current, total) {
return current + '/' + total; // Формат отображения
}
},
// Другие настройки Swiper
slidesPerView: 1,
spaceBetween: 10,
});
</script>
```
### Объяснение:
1. **HTML**:
- Создайте контейнер `swiper-container` и добавьте внутри него `swiper-wrapper`, содержащий слайды в `swiper-slide`.
- Добавьте элемент для пагинации: `<div class="swiper-pagination"></div>`.
2. **JavaScript**:
- Инициализируйте Swiper с помощью `new Swiper('.swiper-container', { ... })`.
- В настройках пагинации укажите `type: 'custom'` и используйте метод `renderCustom`, чтобы задать формат для отображения текущего слайда и общего количества слайдов.
Таким образом, ваша пагинация будет отображаться в формате "текущий/всего", например, "3/6". Не забудьте настроить другие подгруппы слайдов и параметры по вашему усмотрению.