1. Создаем базовую разметку html для swiper

<!-- Основная структура Swiper -->
<div class="swiper-container">
  <!-- Обязательная обертка для слайдов -->
  <div class="swiper-wrapper">
    <!-- Слайды -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>

  <!-- Пагинация (опционально) -->
  <div class="swiper-pagination"></div>

  <!-- Навигационные кнопки (опционально) -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- Скроллбар (опционально) -->
  <div class="swiper-scrollbar"></div>
</div>

2. Подключаем стили swiper в head

<link rel="stylesheet" href="<https://unpkg.com/swiper/swiper-bundle.min.css>">

3. Подключаем скрипты swiper перед закрывающим тегом body

<!-- Подключаем скрипты Swiper -->
<script src="<https://unpkg.com/swiper/swiper-bundle.min.js>"></script>

4. Инициализируем swiper в body

<!-- Инициализируем Swiper -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const swiper = new Swiper('.swiper-container', {
            // Базовые настройки
            loop: true, // бесконечная прокрутка
            slidesPerView: 1, // показывать по 1 слайду
            spaceBetween: 30, // расстояние между слайдами
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
    });
</script>

5. Обязательно добавляем CSS свойство элементу swiper-container

.swiper-container {
  overflow: hidden;
}

<aside> 💡

В целом на данном этапе swiper.js уже подключен к проекту и работает. Дальнейшие настройки будут кастомизировать слайдер под наши задачи.

</aside>

6. Добавляем строчки в базовые настройки

slidesPerView: 1.5, // показывать 1 основной слайд + 50% следующего
centeredSlides: false, // не центрировать слайды

7. Добавляем дополнительные настройки (в самом конце скрипта)

// Дополнительные рекомендации:
            watchOverflow: true, // отключает навигацию если слайдов меньше чем slidesPerView
            resistanceRatio: 0.6, // делает "упругость" при свайпе мягче

8. Немного улучшим слайдер, сделаем его более плавным.

Добавим дополнительные свойства после основных:

// Настройки плавности анимации
        speed: 800, // Увеличили в 2.6 раза (было 300)
        effect: 'slide',
        resistanceRatio: 0.7,
        followFinger: false,
        touchReleaseOnEdges: true,
        grabCursor: true,