Как сделать два слайдера Swiper?

Для того чтобы создать два слайдера Swiper, вы можете использовать следующие шаги:

Подключите файлы стилей и скриптов Swiper к своему веб-приложению. Вы можете скачать их с официального сайта Swiper или использовать библиотеку CDN:
<!-- Стили Swiper -->
<link rel="stylesheet" href="https ://unpkg.com/swiper/swiper-bundle.min.css">

<!-- Скрипт Swiper -->
<script src="https ://unpkg.com/swiper/swiper-bundle.min.js"></script>

Создайте разметку для слайдеров. Каждый слайдер должен состоять из контейнера div с классом swiper-container и списка слайдов ul с классом swiper-wrapper:

<!-- Слайдер 1 -->
<div class="swiper-container">
<ul class="swiper-wrapper">
<li class="swiper-slide">Slide 1</li>
<li class="swiper-slide">Slide 2</li>
<li class="swiper-slide">Slide 3</li>
</ul>
</div>

<!-- Слайдер 2 -->
<div class="swiper-container">
<ul class="swiper-wrapper">
<li class="swiper-slide">Slide 1</li>
<li class="swiper-slide">Slide 2</li>
<li class="swiper-slide">Slide 3</li>
</ul>
</div>
Инициализируйте слайдеры с помощью JavaScript. Вам нужно будет создать экземпляры слайдера Swiper с помощью JavaScript.

Для этого вы можете использовать следующий код:

// Создаем экземпляры слайдеров
var swiper1 = new Swiper('.swiper-container:first-of-type', {
// Опции слайдера
});

var swiper2 = new Swiper('.swiper-container:nth-of-type(2)', {
// Опции слайдера
});

В данном примере мы создаем два экземпляра слайдера Swiper, используя селекторы :first-of-type и :nth-of-type(2) для выбора первого и второго элементов с классом swiper-container соответственно.

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