<!-- Swiper -->
  <div class="swiper-container swiper-image-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 class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>

    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>

    <div class="swiper-container swiper-text-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">text 1</div>
        <div class="swiper-slide">text 2</div>
        <div class="swiper-slide">text 3</div>
        <div class="swiper-slide">text 4</div>
        <div class="swiper-slide">text 5</div>
        <div class="swiper-slide">text 6</div>
        <div class="swiper-slide">text 7</div>
        <div class="swiper-slide">text 8</div>
        <div class="swiper-slide">text 9</div>
        <div class="swiper-slide">text 10</div>
      </div>

    </div>
  </div>

html, body {
  position: relative;
}
body {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color:#000;
  margin: 0;
  padding: 0;
}
.swiper-image-container {
  position: relative;
  width: 100%;
  height: 300px;
  padding-bottom: 50px;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;

  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-image-container .swiper-slide {
  background: #ccc;
}

.swiper-image-container .swiper-slide:nth-child(odd) {
  background: #777;
}

.swiper-text-container {
  position: absolute;
  top: 50px;
  right: 0;
  width: 300px;
  height: 300px;
}

.swiper-text-container .swiper-slide {
  background: #f00;
}

.swiper-text-container .swiper-slide:nth-child(odd) {
  background: #0f0;
}

.swiper-pagination-progressbar {
  height: 20px !important;
  background: linear-gradient(to left, green 1px, transparent 1px) 0 0 / 10% 100%;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  height: 5px !important;
  background-color: red;
}

const textSwiper = new Swiper(".swiper-text-container", {
  direction: "vertical",
  allowTouchMove: false
});

const imageSwiper = new Swiper(".swiper-image-container", {
  pagination: {
    el: ".swiper-pagination",
    type: "progressbar"
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  },
  controller: {
    control: [textSwiper]
  }
});