<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />

<!--<div class="promo-group__swiper-block"> -->
  <!-- Swiper -->
  <div class="promo-group__swiper-container swiper-container">
    <ul class="promo-group__list swiper-wrapper grid-container">
      <li class="item swiper-slide">Первый Slider slide 1</li>
      <li class="swiper-slide">Первый Slider slide 2</li>
      <li class="swiper-slide">Первый Slider slide 3</li>
      <li class="swiper-slide">Первый Slider slide 4</li>
      <li class="swiper-slide">Первый Slider slide 5</li>
      <li class="swiper-slide">Первый Slider slide 6</li>
      <li class="swiper-slide">Первый Slider slide 7</li>
      <li class="swiper-slide">Первый Slider slide 8</li>
      <li class="swiper-slide">Первый Slider slide 9</li>
  </ul>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
 </div>
<!--</div> -->

<!--<div class="promo-group__swiper-block">-->
  <div class="promo-group__swiper-container swiper-container">
    <ul class="promo-group__list swiper-wrapper grid-container">
      <li class="item swiper-slide">Второй Slider slide 1</li>
      <li class="swiper-slide">Второй Slider slide 2</li>
      <li class="swiper-slide">Второй Slider slide 3</li>
      <li class="swiper-slide">Второй Slider slide 4</li>
      <li class="swiper-slide">Второй Slider slide 5</li>
      <li class="swiper-slide">Второй Slider slide 6</li>
      <li class="swiper-slide">Второй Slider slide 7</li>
      <li class="swiper-slide">Второй Slider slide 8</li>
      <li class="swiper-slide">Второй Slide slide 9</li>
  </ul>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>
<!--</div> -->

<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>

html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.promo-group__swiper-container {
  position: relative;
  height: 150px;
}

let containers = document.querySelectorAll(".promo-group__swiper-container");

containers.forEach(function (element) {
  let swiper = new Swiper(element, {
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev"
    }
  });
});