Для добавления точек вместе с счетчиком в Swiper, вы должны включить настройки пагинации и счетчика в вашем коде.
Ниже приведен пример кода:
```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>
<div class="swiper-pagination"></div>
<div class="swiper-counter"></div>
</div>
```
```css
.swiper-pagination {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 10px;
}
.swiper-pagination-bullet {
background: #000;
opacity: 0.5;
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin: 0 5px;
cursor: pointer;
}
.swiper-pagination-bullet-active {
opacity: 1;
}
```
```js
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
init: function() {
var totalSlides = this.slides.length;
var currentSlide = this.activeIndex + 1;
document.querySelector('.swiper-counter').innerHTML = currentSlide + '/' + totalSlides;
},
slideChange: function() {
var totalSlides = this.slides.length;
var currentSlide = this.activeIndex + 1;
document.querySelector('.swiper-counter').innerHTML = currentSlide + '/' + totalSlides;
},
},
});
```
В данном примере мы создаем контейнер Swiper с элементами слайдов внутри него. Мы также добавляем контейнеры для пагинации и счетчика слайдов. Затем мы использовали CSS для стилизации пагинации с точками и создали переменные для отслеживания общего количества слайдов и текущего активного слайда.
В JavaScript мы инициализируем Swiper с соответствующими настройками. Внутри обработчика on: { init: } мы устанавливаем начальное значение счетчика слайдов. В обработчике slideChange: мы обновляем значение счетчика слайдов при каждом изменении слайда.
Это пример, и вы можете настроить стили и макет по своему усмотрению.
