Для создания слайдера с помощью Swiper, который будет вести себя, как вы описали, с активным слайдом, располагающимся с левой стороны, вам нужно немного настроить стили и параметры Swiper. Вот пример, как это можно сделать.
### Шаг 1: Подключите библиотеку Swiper
Первым делом, добавьте CSS и JS файлы Swiper в ваш проект. Вы можете подключить их через CDN:
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/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 class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
```
### Шаг 3: Добавьте CSS для стилизации слайдов
Настройте CSS, чтобы активный слайд выглядел больше, а остальные — меньше:
```css
.swiper-container {
width: 100%;
height: 300px; /* Высота вашего слайдера */
}
.swiper-slide {
background: #007aff; /* Цвет фона для слайдов */
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
color: white;
/* Установите размер слайдов, помимо активного */
transition: transform 0.3s ease; /* Плавный переход */
}
.swiper-slide-active {
transform: scale(1.1); /* Увеличиваем активный слайд */
}
/* Уменьшаем размер неактивных слайдов */
.swiper-slide:not(.swiper-slide-active) {
opacity: 0.5; /* Уменьшаем непрозрачность неактивных слайдов */
}
```
### Шаг 4: Инициализируйте Swiper с нужными параметрами
Добавьте JavaScript для инициализации слайдера:
```html
<script>
const swiper = new Swiper('.swiper-container', {
slidesPerView: 'auto',
centeredSlides: false,
spaceBetween: 10, // Промежуток между слайдами
loop: true,
on: {
slideChangeTransitionStart: function () {
// При смене слайда выравниваем активный слайд
this.slides.forEach((slide, index) => {
if (slide.classList.contains('swiper-slide-active')) {
this.slideTo(index, 0, false); // Перемещаем активный слайд в конец
}
});
},
},
});
</script>
```
### Итог
Теперь ваш слайдер будет иметь активный слайд с размером, большим по сравнению с другими, и всегда будет расположен с левой стороны. Не забудьте настроить стили и параметры в зависимости от ваших требований.
### Дополнительные настройки
Вы можете настроить слайдер, добавив другие параметры Swiper, такие как навигационные кнопки, пагинация и тому подобное, в зависимости от ваших нужд.