Как я могу создать слайд с помощью Swiper так, чтобы при адаптации половина слайда оставалась видимой?

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

### Шаги для реализации:

1. Убедитесь, что вы подключили библиотеку Swiper. Вы можете добавить Swiper через 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
<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>
```

3. Настройте CSS для отображения половины слайда:

```css
.swiper-container {
  width: 100%;
  height: 100vh; /* Установите высоту по необходимости */
  overflow: hidden; /* Скрыть избыток */
}

.swiper-slide {
  background: #008080; /* Например, цвет фона слайда */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px; /* Размер шрифта */
  color: white;
  width: 50%; /* Ширина слайда, чтобы он занимал половину видимой области */
}

/* Для обеспечения видимости половины слайда */
.swiper-wrapper {
  margin-left: -50%; /* Сдвиг, чтобы видимые слайды отображались корректно */
}
```

4. Инициализируйте Swiper с нужными параметрами:

```html
<script>
  const swiper = new Swiper('.swiper-container', {
    slidesPerView: 'auto', // Позволяет управлять размерами слайдов
    centeredSlides: true, // Центрирует активный слайд
    spaceBetween: 30, // Промежуток между слайдами
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
</script>
```

### Объяснение:

- Мы установили `width: 50%` для `.swiper-slide`, чтобы каждый слайд занимал половину ширины родительского контейнера.
- Используется `margin-left: -50%` для `swiper-wrapper`, чтобы сдвинуть видимый поток слайдов, обеспечив видимость половины следующего слайда.
- `slidesPerView: 'auto'` позволяет динамически подстраивать количество видимых слайдов.

Настройте значения высоты, цвета фона и другие параметры по вашему усмотрению, чтобы достичь желаемого результата.