Slides

by Katarn

HTML

<div class="container">
  <div class="slide" style="--bg: Salmon;"></div>
  <div class="slide" style="--bg: Lavender;"></div>
  <div class="slide" style="--bg: Moccasin;"></div>
  <div class="slide" style="--bg: LightCyan;"></div>
</div>

CSS

body {
  margin: 0;
}

.container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.slide {
  background: var(--bg);
  height: 100vh;
  scroll-snap-align: start;
}