Проблема, с которой вы столкнулись, заключается в том, что при использовании кастомной пагинации `renderCustom` количество слайдов (в переменной `total`) доступно, но может потребоваться изменить код, чтобы правильно отображать его внутри каждого слайда.
Если вы хотите, чтобы количество слайдов отображалось в каждом слайде, то вам нужно использовать событие `init` или `slideChange` для обновления текста внутри каждого слайда. Вот пример того, как это сделать:
```javascript
const swiper = new Swiper('.swiper-container', {
// Ваши остальные настройки
on: {
init: function () {
// Вызываем функцию для инициализации количества слайдов
updateSlideCount(this);
},
slideChange: function () {
// Вызываем функцию при смене слайда
updateSlideCount(this);
},
},
});
function updateSlideCount(swiper) {
// Получаем общее количество слайдов
const totalSlides = swiper.slides.length;
// Проходим по всем слайдам и обновляем счетчик
swiper.slides.each(function (index) {
// Например, добавляем текст "Total: 5"
// Можете изменить формат текста по вашему усмотрению
$(this).find('.slide-count').text(`Total: ${totalSlides}`);
});
}
```
В этом примере мы используем jQuery для поиска элемента, в который необходимо вставить количество слайдов, но вы можете использовать чистый JavaScript или другую библиотеку по вашему выбору.
Убедитесь, что у вас есть элемент с классом `slide-count` внутри каждого слайда, где будет выводиться количество слайдов, например:
```html
<div class="swiper-slide">
<div class="slide-count"></div>
<!-- Другие содержимое слайда -->
</div>
```
С данным решением, количество слайдов будет обновляться как при инициализации, так и при смене слайда.