<!-- Swiper -->
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="swiper-slide__inner">
        <div class="swiper-slide__text">Slide 1</div>
        <img class="swiper-slide__image" src="https://images.unsplash.com/photo-1511275539165-cc46b1ee89bf?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt="">
      </div>
    </div>
    <div class="swiper-slide">
      <div class="swiper-slide__inner">
        <div class="swiper-slide__text">Slide 2</div>
        <img class="swiper-slide__image" src="https://images.unsplash.com/photo-1495528277160-614167d04a0f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=777&q=80" alt="">
      </div>
    </div>
    <div class="swiper-slide">
      <div class="swiper-slide__inner">
        <div class="swiper-slide__text">Slide 3</div>
        <img class="swiper-slide__image" src="https://images.unsplash.com/photo-1497910091122-9f8a7746eb33?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=750&q=80" alt="">
      </div>
    </div>
    <div class="swiper-slide">
      <div class="swiper-slide__inner">
        <div class="swiper-slide__text">Slide 4</div>
        <img class="swiper-slide__image" src="https://images.unsplash.com/photo-1515002246390-7bf7e8f87b54?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=750&q=80" alt="">
      </div>
    </div>
    <div class="swiper-slide">
      <div class="swiper-slide__inner">
        <div class="swiper-slide__text">Slide 5</div>
        <img class="swiper-slide__image" src="https://images.unsplash.com/photo-1515172486498-7a0b147a16c5?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt="">
      </div>
    </div>
    <div class="swiper-slide">
      <div class="swiper-slide__inner">
        <div class="swiper-slide__text">Slide 6</div>
        <img class="swiper-slide__image" src="https://images.unsplash.com/photo-1511275539165-cc46b1ee89bf?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt="">
      </div>
    </div>
    <div class="swiper-slide">
      <div class="swiper-slide__inner">
        <div class="swiper-slide__text">Slide 7</div>
        <img class="swiper-slide__image" src="https://images.unsplash.com/photo-1511275539165-cc46b1ee89bf?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt="">
      </div>
    </div>
  </div>
  <!-- Add Arrows -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

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

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

.swiper-container {
  --height: 200px;
  --angle: 15deg;
  --tan: 0.2679491924311227; /* Math.tan(Math.PI * 15/180) */
  width: 75%;
  height: var(--height);
  margin: 10px auto 0;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  display: flex;
  flex-direction: column;
/*   will-change: transform;
  transform: skewX(calc(var(--angle) * var(--speed, 0))); */
/*   overflow: hidden; */
}

.swiper-slide__inner {
  --offset: calc(var(--height) * var(--tan) * 0.5);
  flex-basis: 100%;
  position: relative;
/*   will-change: transform;
  transform: skewX(calc(-1 * var(--angle) * var(--speed, 0))); */
  z-index: 0;
  margin-left: calc(-1 * var(--offset));
  margin-right: calc(-1 * var(--offset));
  clip-path: polygon(
    calc(var(--offset) * var(--speed, 0) + var(--offset)) 0,
    calc(var(--offset) * var(--speed, 0) - var(--offset) + 100%) 0,
    calc(-1 * var(--offset) * var(--speed, 0) - var(--offset) + 100%) 100%,
    calc(-1 * var(--offset) * var(--speed, 0) + var(--offset)) 100%
  );
}

.swiper-slide__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.swiper-slide__text {
  padding: 5px;
  background-color: #22f7;
  color: #fff;
}

const swiperEl = document.querySelector('.swiper-container');

let speed = 0;
let currProgress = 0;
let prevProgress = 0;
let rafId = null;

function loop(now) {
  const dp = (currProgress - prevProgress) * 0.07;
  prevProgress += dp;
  speed += dp;
  speed *= 0.9;
  
  if (Math.abs(speed) < 0.001) {
    speed = 0;
  }
  
  swiperEl.style.setProperty('--speed', clamp(speed / 0.2, -1, 1));
  
  if (speed === 0) {
    rafId = null;
  }
  else {
    rafId = requestAnimationFrame(loop);
  }
}

const swiper = new Swiper('.swiper-container', {
  slidesPerView: 3,
  spaceBetween: 20,
  watchSlidesProgress: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  on: {
    afterInit(self) {
      currProgress = self.progress;
      prevProgress = currProgress;
    },
    progress(self, p) {
      currProgress = p;
      
      if (!rafId) {
        rafId = requestAnimationFrame(loop);
      }
    }
  }
});

function clamp(val, min, max) {
  return Math.min(Math.max(val, min), max);
};