CodePen Embed - Vertical skew slider

<div class="slider-container">
  <div class="slide slide0 scrolling_active">
    <div class="slide-part slide-left-part">
      <div class="slide-skew">
        <div class="slide-content content-left-part"></div>
      </div>
    </div>
    <div class="slide-part slide-right-part">
      <div class="slide-skew">
        <div class="slide-content content-right-part">
          <h3 class="slide-title">First slide</h3>
          <p class="slide-subtitle">Just scroll down</p>
        </div>
      </div>
    </div>
  </div>

  <div class="slide slide1">
    <div class="slide-part slide-left-part">
      <div class="slide-skew">
        <div class="slide-content content-left-part">
          <h3 class="slide-title">Second slide</h3>
          <p class="slide-subtitle">Continue scrolling</p>
        </div>
      </div>
    </div>
    <div class="slide-part slide-right-part">
      <div class="slide-skew">
        <div class="slide-content content-right-part"></div>
      </div>
    </div>
  </div>

  <div class="slide slide2">
    <div class="slide-part slide-left-part">
      <div class="slide-skew">
        <div class="slide-content content-left-part"></div>
      </div>
    </div>
    <div class="slide-part slide-right-part">
      <div class="slide-skew">
        <div class="slide-content content-right-part">
          <h3 class="slide-title">Third slide</h3>
          <p class="slide-subtitle">Keep scrolling down</p>
        </div>
      </div>
    </div>
  </div>

  <div class="slide slide3">
    <div class="slide-part slide-left-part">
      <div class="slide-skew">
        <div class="slide-content content-left-part">
          <h3 class="slide-title">Fourth slide</h3>
          <p class="slide-subtitle">Look what beautiful photos</p>
        </div>
      </div>
    </div>
    <div class="slide-part slide-right-part">
      <div class="slide-skew">
        <div class="slide-content content-right-part"></div>
      </div>
    </div>
  </div>

  <div class="slide slide4">
    <div class="slide-part slide-left-part">
      <div class="slide-skew">
        <div class="slide-content content-left-part"></div>
      </div>
    </div>
    <div class="slide-part slide-right-part">
      <div class="slide-skew">
        <div class="slide-content content-right-part">
          <h3 class="slide-title">Fifth slide</h3>
          <p class="slide-subtitle">We're getting close to the end</p>
        </div>
      </div>
    </div>
  </div>

  <div class="slide slide5">
    <div class="slide-part slide-left-part">
      <div class="slide-skew">
        <div class="slide-content content-left-part">
          <h3 class="slide-title">Sixth slide</h3>
          <p class="slide-subtitle">
            Last slide. But if you want, you can keep scrolling
          </p>
        </div>
      </div>
    </div>
    <div class="slide-part slide-right-part">
      <div class="slide-skew">
        <div class="slide-content content-right-part"></div>
      </div>
    </div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,500;0,600;1,400&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #272727;
  font-family: 'Open Sans', sans-serif;
}

.slider-container {
  position: relative;
  height: 100vh;
  min-width: 320px;
  overflow: hidden;
}

.slide-part {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100vh;
  transition: transform 1s;
}

.slide-skew {
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 140%;
  height: 100%;
  background-color: #272727;
  transform: skewX(-18deg);
}

.slide-left-part {
  left: 0;
  transform: translateX(-32.5vh) translateY(100%) translateZ(0);
}

.slide-left-part .slide-skew {
  left: -40%;
}

.slide-left-part .slide-content {
  padding: auto 30%;
  transform-origin: 100% 0;
}

.slide-right-part {
  left: 50%;
  transform: translateX(32.5vh) translateY(-100%) translateZ(0);
}

.slide-right-part .slide-skew {
  right: -40%;
}

.slide-right-part .slide-content {
  padding: auto 30%;
  transform-origin: 0 100%;
}

.slide-content {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0 30%;
  background-size: cover;
  transform: skewX(18deg);
  color: #ffffff;
  font-size: 3vh;
  text-align: center;
}

.slide-title {
  font-size: 6vh;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.scrolling_active .slide-part {
  transform: translateX(0) translateY(0) translateZ(0);
}

.slide0 .slide-right-part .slide-content {
  background-color: #5287ae;
}

.slide0 .slide-left-part .slide-content {
  background-image: url('https://live.staticflickr.com/65535/51101882555_01c3f054fb_b.jpg');
}

.slide1 .slide-left-part .slide-content {
  background-color: #fead51;
}

.slide1 .slide-right-part .slide-content {
  background-image: url('https://live.staticflickr.com/65535/50579895532_28daf75bdb_h.jpg');
}

.slide2 .slide-right-part .slide-content {
  background-color: #709f5f;
}

.slide2 .slide-left-part .slide-content {
  background-image: url('https://live.staticflickr.com/65535/48464526327_25c0dfce4d_b.jpg');
}

.slide3 .slide-left-part .slide-content {
  background-color: #ca6e3d;
}

.slide3 .slide-right-part .slide-content {
  background-image: url('https://live.staticflickr.com/65535/50707026246_130f226674_b.jpg');
}

.slide4 .slide-right-part .slide-content {
  background-color: #0070a6;
}

.slide4 .slide-left-part .slide-content {
  background-image: url('https://live.staticflickr.com/7861/33236249688_fbf19da20c_b.jpg');
}

.slide5 .slide-left-part .slide-content {
  background-color: #b03634;
}

.slide5 .slide-right-part .slide-content {
  background-image: url('https://live.staticflickr.com/7881/45840760745_f790655589_b.jpg');
}

const sliderContainer = document.querySelector('.slider-container');
const slides = document.querySelectorAll('.slide');
const slidesLength = slides.length;

let activeSlideIndex = 0;

const moveToSlide = (swap) => {
  if (sliderContainer.classList.contains('slider-locked')) return;

  activeSlideIndex = (activeSlideIndex + swap + slidesLength) % slidesLength;

  sliderContainer.classList.add('slider-locked');

  slides.forEach((slide, index) => {
    slide.classList.toggle('scrolling_active', index === activeSlideIndex);
  });
}

const onTransitionEnd = () => {
  sliderContainer.classList.remove('slider-locked');
}

const onScroll = (event) => {
  event.preventDefault();
  const swap = Math.sign(event.deltaY);
  moveToSlide(swap);
}

document.addEventListener('wheel', onScroll);
sliderContainer.addEventListener('transitionend', onTransitionEnd);

This Pen is owned by Irina on CodePen.

See more by @irinainina on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.