<div class="carousel">
  <ul id="list">
    <li>
      <p>Ornare curabitur ultrices</p>
      <img src="https://images.unsplash.com/photo-1531591022136-eb8b0da1e6d0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1920&q=80" alt="" />
    </li>
    <li>
      <p>Id ipsum platea</p>
      <img src="https://images.unsplash.com/photo-1532680678473-a16f2cda8e43?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1920&q=80" alt="" />
    </li>
    <li>
      <p>Nunc mauris nam bibendum</p>
      <img src="https://images.unsplash.com/photo-1488972685288-c3fd157d7c7a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1920&q=80" alt="" />
    </li>
    <li>
      <p>Non viverra habitasse</p>
      <img src="https://images.unsplash.com/photo-1518005020951-eccb494ad742?ixlib=rb-4.0.3&  ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1655&q=80" alt="" />
    </li>
  </ul>
</div>
<div class="thumbnails"></div>

.carousel {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  
  ul {
    display: flex;
    width: fit-content;
  }
  
  li {
    align-items: center;
    display: flex;
    position: relative;
    scroll-snap-align: center;
  }
  
  p {
    color: #fff;
    font-family: Inter, sans-serif;
    font-size: 5vmax;
    font-weight: bold;
    left: 1em;
    line-height: 1.125;
    position: absolute;
    text-transform: uppercase;
    width: 75%;
  }
  
  img {
    height: 75vh;
    object-fit: cover;
    width: 100vw;
  }
}

.thumbnails {
  background: element(#list) no-repeat center / contain;
  height: 10vh;
  margin: 5vh 0;
}