Как можно изменить стиль или оформление неактивных слайдов в слайдере Swiper?

Для изменения оформления неактивных слайдов и реализации эффекта, который вы описали, вам нужно будет применять кастомные стили CSS и настройки Swiper. Вот общий подход к решению вашей задачи.

### 1. Настройка Swiper

Вы можете использовать Swiper.js для создания слайдера. Вот базовая структура 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 class="swiper-slide">Слайд 4</div>
    </div>
    <!-- Навигационные кнопки (если нужно) -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>
```

### 2. Инициализация Swiper

Инициализируйте Swiper с необходимыми настройками:

```javascript
var swiper = new Swiper('.swiper-container', {
    effect: 'slide', // используйте нужный вам эффект
    loop: true,
    slidesPerView: 1, // 1 активный слайд
    centeredSlides: true, // активный слайд по центру
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    on: {
        slideChange: function () {
            updateSlideStyles();
        }
    }
});
```

### 3. CSS стиль для неактивных слайдов

Добавьте стили для неактивных слайдов, чтобы они отображались как кружки:

```css
.swiper-slide {
    opacity: 0.5; /* Уменьшаем непрозрачность для неактивных слайдов */
    transition: opacity 0.3s; /* Плавный переход */
    border-radius: 50%; /* Кружок */
    width: 50px; /* Ширина кружка */
    height: 50px; /* Высота кружка */
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide-active {
    opacity: 1; /* Полная непрозрачность для активного слайда */
    transform: scale(1.1); /* Увеличение активного слайда для акцента */
}

/* Если нужно добавить расположение неактивных слайдов сбоку */
.swiper-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.swiper-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.swiper-slide:not(.swiper-slide-active) {
    position: absolute;
    bottom: 0; /* Расположение внизу, можно настроить */
}
```

### 4. Обновление стилей при смене слайда

Создайте функцию для обновления стилей каждого слайда:

```javascript
function updateSlideStyles() {
    const slides = document.querySelectorAll('.swiper-slide');
    slides.forEach(slide => {
        if (slide.classList.contains('swiper-slide-active')) {
            slide.style.opacity = '1';
            slide.style.transform = 'scale(1.1)';
        } else {
            slide.style.opacity = '0.5';
            slide.style.transform = 'scale(1)';
        }
    });
}

// Первый вызов для инициализации стилей
updateSlideStyles();
```

### Итог

С помощью этих шагов вы сможете создать стильный слайдер с активным слайдом по центру и кружками для неактивных слайдов сбоку. Не забудьте подключить Swiper.js и его CSS в вашем проекте для корректной работы.

Если правильно понял вопрос... 
 У свайпера есть класс для активного слайда (swiper-slide-active), значит, все остальные уже по умолчанию неактивные, так что городить новый класс нет смысла. 
 Ну и хорошим тоном было бы не трогать стили слайдов, а воздействовать на то, что внутри них. Например, сделать внутри слайда контейнер с любым удобным классом (скажем, container), повесить на него transition и прочие стили.