<div class="swipeView">
  <section class="green">
    
  </section>
  <section class="purple">
   
  </section>
  <section class="orange">
     
  </section>
</div>
.swipeView {
  display: grid;
  grid-template-columns: repeat(4, 100%);
  will-change: transform;
  align-content: center;
  overflow-x: auto;
  scroll-snap-coordinate: 0 0;
  scroll-snap-points-x: repeat(100%);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

section {
  height: 80vh;
  scroll-snap-align: start;
}

.green {
  background: #ABE66F;
}

.purple {
  background: #4E4E94;
}

.orange {
  background: #FD8F58;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.