​

<div class="container">

  <div class="item">Item 1</div>

  <div class="item">Item 2</div>

  <div class="item">Item 3</div>

  <div class="item">Item 4</div>

  <div class="item">Item 5</div>

</div>

​

<button class="next-button">Next</button>

<button class="prev-button">Prev</button>

​

/* container要素をスクロール可能にする */

.container {

  display: flex;

  overflow-x: scroll;

  scroll-snap-type: x mandatory;

  scroll-behavior: smooth; /* スクロールを滑らかにする */

}

​

/* container内の要素を一行に配置する */

.item {

  flex: 0 0 100%;

  scroll-snap-align: center;

}

​

​

​

/* ======== 以下、demoのためのスタイル ======== */

​

.item {

  height: 100vh;

  font-size: 2rem;

  background-color: #f7f7f7;

  display: grid;

  place-items: center;

}

​

.next-button, .prev-button {

  position: fixed;

  top: 50%;

  transform: translateY(-50%);

  width: 2.5rem;

  height: 2.5rem;

  background-color: #333;

  color: #fff;

  border: none;

  cursor: pointer;

}

​

.next-button {

  right: 1rem;

}

​

.prev-button {

  left: 1rem;

}