<img 
   id="item-1"
   src='https://images.unsplash.com/photo-1490729342320-34bf3076ddea?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1500&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>

<img 
  id="item-2"
  src='https://images.unsplash.com/photo-1564224523819-4bc32eb11190?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&w=1500&fit=max' alt=''>

<img 
  id="item-3"
  src='https://images.unsplash.com/photo-1467151568115-d968fdf5d292?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1500&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>

<img 
  id="item-4"
  src='https://images.unsplash.com/photo-1500937078812-a4aea2239059?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1500&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>

<nav>
  <a href="#item-1">1</a>
  <a href="#item-2">2</a>
  <a href="#item-3">3</a>
  <a href="#item-4">4</a>
</nav>

IMG {
  display: block;
  height: 100vh;
  width: 100%;
  object-fit: cover;
}

NAV {
  position: fixed;
  top: 1rem;
  right: 1rem;
  
  A {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    border: 2px solid;
    background: rgba(255,255,255,.45);
    box-shadow: 0 0 0 3px rgba(255,255,255,.45);
    color: #000;
    text-decoration: none;
  }
}

HTML {
  scroll-behavior: smooth;
  font: 1rem/1.6 Trebouchet MS, Arial, sans-serif;
  scroll-snap-type: y mandatory;
}

IMG {
  scroll-snap-align: center;
}