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

Для настройки пагинации в библиотеке Swiper нужно добавить опцию pagination и указать соответствующий элемент для отображения пагинации. Например:

```js
var mySwiper = new Swiper('.swiper-container', {
  // другие опции
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});
```

Чтобы сменить класс активности у просмотренного слайда, можно использовать событие slideChange в Swiper и добавить/удалить класс активности у соответствующего слайда. Например:

```js
var mySwiper = new Swiper('.swiper-container', {
  // другие опции
  on: {
    slideChange: function () {
      $('.swiper-slide').removeClass('active-slide');
      $('.swiper-slide-active').addClass('active-slide');
    },
  },
});
```

В данном примере при смене слайда все слайды теряют класс 'active-slide', а у текущего активного слайда добавляется этот класс. Таким образом, можно отслеживать текущий просматриваемый слайд и применять к нему нужные стили.

Для добавления класса активности текущему слайду в Swiper и удаления его при переходе к другому слайду, можно использовать события  slideChangeTransitionStart или slideChange. 
 
 Нужно добавить класс активности (например, 'active-slide') к слайду, который становится активным, и убрать его с предыдущего активного слайда. Это можно сделать, добавив обработчики событий в ваш Swiper конфиг: 
 
 
var swiper = new Swiper(".repair-calc_slider", {
    navigation: {
      nextEl: ".repair-calc-next",
      prevEl: ".repair-calc-prev",
    },
    pagination: {
        el: ".repair-calc-pagination",
        clickable: true,
        renderBullet: function (index, className) {
          return '<span class="' + className + '">' + (index + 1) + "</span>";
        },
    },
    on: {
        init: function () {
          this.slides.forEach(slide => {
            if (slide === this.slides[this.activeIndex]) {
              slide.classList.add('active-slide'); // Добавляем класс первому активному слайду при инициализации
            }
          });
        },
        slideChange: function () {
          this.slides.forEach(slide => {
            slide.classList.remove('active-slide'); // Удаляем класс активности со всех слайдов
          });
          this.slides[this.activeIndex].classList.add('active-slide'); // Добавляем класс активности текущему активному слайду
        }
    }
});

// Инициализация Swiper
swiper.init();
 
 
 Событие slideChange используется для обновления класса активности при каждом изменении слайда.