Создание эффекта, подобного вертикальному колесу фортуны, с помощью Swiper требует использования пользовательских стилей и настройки слайдера. Ваша цель - добиться анимации, при которой активный слайд находится в центре, а другие слайды плавно смещаются вверх и вниз.
Вот пример, как это можно реализовать:
### 1. Установка Swiper
Сначала необходимо установить Swiper через npm или подключить библиотеку через CDN:
```html
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
```
### 2. HTML структура
Создайте структуру 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 class="swiper-slide">Слайд 5</div>
</div>
</div>
```
### 3. CSS стили
Добавьте стили, чтобы расположить слайды по вертикали и добавить эффект смещения:
```css
.swiper-container {
width: 300px;
height: 400px;
overflow: hidden;
}
.swiper-wrapper {
display: flex;
flex-direction: column;
transition: transform 0.5s ease;
}
.swiper-slide {
display: flex;
justify-content: center;
align-items: center;
height: 100px; /* Высота каждый слайд */
background: #fff;
border: 1px solid #ddd;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.5s ease;
}
.swiper-slide-active {
transform: scale(1.1); /* Увеличение активного слайда */
}
```
### 4. Инициализация Swiper
Теперь инициализируйте Swiper с нужными параметрами:
```javascript
const swiper = new Swiper('.swiper-container', {
direction: 'vertical',
slidesPerView: 1,
centeredSlides: true,
loop: true,
on: {
slideChange: function () {
const slides = this.slides;
slides.each(function (index, item) {
const slide = $(item);
const offset = index - swiper.activeIndex;
if (offset === 1) {
slide.css('transform', 'translateY(100%)'); // Сдвиг вниз
} else if (offset === -1) {
slide.css('transform', 'translateY(-100%)'); // Сдвиг вверх
} else {
slide.css('transform', 'translateY(0)');
}
});
}
}
});
```
### Пояснения к коду:
1. **HTML** - создаёт структуру слайдера.
2. **CSS** - стилизует слайды и добавляет эффект трансформации.
3. **JavaScript** - инициализирует Swiper и добавляет обработчик событий для изменения стиля слайдов при смене активного слайда.
### Итоги
Эта реализация позволяет создать эффект, где активный слайд остается по центру, а другие слайды плавно перемещаются вверх и вниз, создавая визуальный эффект колеса фортуны. Вы можете настроить стили и анимации в соответствии с вашими потребностями для достижения желаемого визуального эффекта.