Swiper

by kthornbloom

HTML

<div class="swipe">
  <div class="swipe-stage">
    <div class="swipe-item">
      A
    </div>
    <div class="swipe-item">
      B
    </div>
    <div class="swipe-item">
      C
    </div>
    <div class="swipe-item">
      D
    </div>
    <div class="swipe-item">
      E
    </div>
    <div class="swipe-item">
      F
    </div>
    <div class="swipe-item">
      G
    </div>
    <div class="swipe-item">
      H
    </div>
    <div class="swipe-item">
      I
    </div>
  </div>
</div>

SCSS

.swipe {
  height: 300px;
  overflow: hidden;
  width: 100%;
  &-stage {
    display: flex;
    overflow-x: scroll;
    position: relative;   
    scroll-snap-type: mandatory;
    scroll-snap-points-x: repeat(300px);
    scroll-snap-type: x mandatory;
  }
  
  &-item {
    min-width: 300px;
    min-height: 300px;
    background: tomato;
    box-shadow: inset 0 0 1px #fff;
    scroll-snap-align: start;
  }
  
}