【CSS】CSSだけで作るカルーセル

はじめに

みなさんはカルーセルを作りたいと思ったことはありますか？

今までは、ライブラリーを使ったりしても、アクセシビリティの担保ができてなかったり、
少し複雑なJSを書かなくちゃいけなかったりと、カルーセルを自作するのは大変でした。

しかし、Chrome 135 以降では、CSS Overflow Module Level 5 が適応され、CSSだけで、カルーセルが作れるようになりました。

そのため、この記事では、CSSだけでカルーセルを作る方法を紹介しようと思います。

CSSだけで作るカルーセル

カルーセルのコンテナを作る

まずは、このようにカルーセルのコンテナをつくります。

<ul class="carousel">
  <li class="carousel-item">1</li>
  <li class="carousel-item">2</li>
  <li class="carousel-item">3</li>
  <li class="carousel-item">4</li>
  <li class="carousel-item">5</li>
</ul>

.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;

  /* スタイル調整 */
  display: flex;
  gap: 16px;
  width: 250px;
  margin: 0px;
  padding: 16px 0px;
}

.carousel-item {
  scroll-snap-align: center;

  /* スタイル調整 */
  height: 100px;
  width: 200px;
  flex-shrink: 0;
}

コンテナに　display: flex; を指定して横並びにします。
そして、overflow-x: auto; を指定して、横スクロールできるようにしてます。
スクロールが変な位置で止まらないように、scroll-snap-type: x mandatory; を指定します。

また、itemに flex-shrink: 0;を指定して、itemが縮まないようにして、
scroll-snap-align: center; で、コンテナの中央で止まるように調整しています。

スクロール用のボタンを追加する

カルーセルをスクロールさせるためのボタンを ::scroll-button() 疑似要素を使って作成します。

::scroll-button() は、　::scroll-button(方向) でスクロール方向を指定します。

.carousel {
  /* ... */

  &::scroll-button(left) {
    content: "←" / "Scroll Left";
  }
  
  &::scroll-button(right) {
    content: "→" / "Scroll Right";
  }
}

::scroll-button() 疑似要素で、content: "←" / "Scroll Left";を指定することで、
roleがbuttonで、nameがScroll Leftが追加されます。

スクロールマーカーを追加する

次は、カルーセルの下によくあるマーカーを追加していきます。

.carousel {
  /* ... */
  
  scroll-marker-group: after;

  &::scroll-marker-group {
  /* マーカーグループのスタイル　*/
  }
}

.carousel-item {
  /* ... */

  &::scroll-marker {
      /* マーカーのスタイル　*/
  }
  
  &::scroll-marker:target-current {
      /* ターゲットの当たっているマーカーのスタイル　*/
  }
}

スクロールマーカーを追加するには、コンテナー要素にscroll-marker-groupを指定する必要があります。
scroll-marker-groupは、beforeとafterの値を指定でき、表示させる位置を指定します。

そして、スクロールマーカーグループにスタイルを当てるには、&::scroll-marker-group疑似要素を使うことで指定することができます。

また、個別のマーカーにスタイルを当てるには、&::scroll-marker 疑似要素を使うことで指定することができます。

完成系

お好みのスタイルに調整したら完成です！

See the Pen CSS Only Carousel by degudegu2510 | Qiita (@degudegu2510) on CodePen.

まとめ

この記事では、CSSで作るカルーセルを作る方法を紹介しました。
ぜひこの記事を参考に、カルーセルを作ってみてください

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。