<!-- 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]
  }
});

External CSS

  1. https://unpkg.com/swiper/swiper-bundle.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js