<div class="swiper">

  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide slide">
        <img class="slide__photo" src="//placehold.it/300x300" alt="">
        <div class="slide__desc">Slide 1</div>
      </div>
      <div class="swiper-slide slide">
        <img class="slide__photo" src="//placehold.it/300x300" alt="">
        <div class="slide__desc">Slide 2</div>
      </div>
      <div class="swiper-slide slide">
        <img class="slide__photo" src="//placehold.it/300x300" alt="">
        <div class="slide__desc">Slide 3</div>
      </div>
      <div class="swiper-slide slide">
        <img class="slide__photo" src="//placehold.it/300x300" alt="">
        <div class="slide__desc">Slide 4</div>
      </div>
      <div class="swiper-slide slide">
        <img class="slide__photo" src="//placehold.it/300x300" alt="">
        <div class="slide__desc">Slide 5</div>
      </div>
      <div class="swiper-slide slide">
        <img class="slide__photo" src="//placehold.it/300x300" alt="">
        <div class="slide__desc">Slide 6</div>
      </div>
      <div class="swiper-slide slide">
        <img class="slide__photo" src="//placehold.it/300x300" alt="">
        <div class="slide__desc">Slide 7</div>
      </div>
      <div class="swiper-slide slide">
        <img class="slide__photo" src="//placehold.it/300x300" alt="">
        <div class="slide__desc">Slide 8</div>
      </div>
    </div>
  </div>

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

  <!-- Add Pagination -->
  <div class="swiper-pagination"></div>

</div>

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  margin: 0;
  color: #fff;
}

/* .container {
  position: relative;
  margin: 0 auto;
  background-color: #f005;
} */

.swiper {
  margin-top: 10px;
  position: relative;
  overflow: hidden;
}

.swiper-container {
  margin: 0 auto;
  width: 65%;
  height: 200px;
  overflow: visible !important;
}

.slide {
  position: relative;
  display: flex;
}

.slide__photo {
  width: 50%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}

.slide__desc {
  width: 50%;
  height: 100%;
  background: #4caf50;
  text-align: center;
  padding: 15px;
}

.slide:nth-child(even) .slide__desc {
  background: #673ab7;
}

.swiper-slide {
  z-index: 0;
}

.swiper-slide-active {
  z-index: 1;
}

.swiper-wrapper.swiper-is-transition .slide__desc,
.swiper-wrapper.swiper-is-transition .slide__photo {
  transition: transform 1000ms;
}

.swiper-slide-prev .slide__desc {
  transform: translateX(-101%);
}

.swiper-slide-active ~ .swiper-slide .slide__photo {
  transform: translateX(99%);
}

.swiper-slide .slide__desc {
  transform: translateX(-101%);
}

.swiper-slide-active .slide__desc,
.swiper-slide-active ~ .swiper-slide .slide__desc {
  transform: translateX(0);
}

new Swiper(".swiper-container", {
  spaceBetween: '-40%',
  speed: 1000,
  on: {
    slideChangeTransitionStart(self) {
      self.wrapperEl.classList.add('swiper-is-transition');
    },
    slideChangeTransitionEnd(self) {
      self.wrapperEl.classList.remove('swiper-is-transition');
    },
  },
  pagination: {
    el: ".swiper-pagination",
    type: "fraction",
  },
   navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});