cssのscroll-snap-typeを使って簡単にカルーセルを作る

Posted at 2025-01-05

はじめに

モバイルのフロントエンドの実装をしていると、カルーセルを作る場面が多いですよね。

UIライブラリを使ったりして簡単に実装することもできますが、UIライブラリーだとちょっとしたカスタム要素を入れるために無駄な工数がかかることもあります。

そこで、cssを使うと簡単にカルーセルを作れることがわかりましたのでまとめてみました。

カルーセルとは？

クリック（タップ）などの操作により、複数のコンテンツを横にスライドさせることで、メインの表示を切り替えられる仕組み

よくあるモバイルページとかの横に流れるやつです。

実装してみる

jsで実装

ライブラリを使わず、jsで実装するためには以下のような要件があります。

スクロールイベントの監視とスクロール位置の計算が必要
アニメーションの実装
パフォーマンスの考慮（特にモバイル端末）
タッチデバイスでの挙動制御

例えば以下のようなjsでスクロールを実装することができます。

// スクロールの終了位置を計算して アニメーションする
const smoothScroll = (element, target) => {
  const start = element.scrollLeft;
  const distance = target - start;
  const duration = 300;
  let startTime = null;

  const animation = (currentTime) => {
    if (startTime === null) startTime = currentTime;
    const timeElapsed = currentTime - startTime;
    const progress = Math.min(timeElapsed / duration, 1);
    
    element.scrollLeft = start + distance * easeInOutQuad(progress);
    
    if (timeElapsed < duration) {
      requestAnimationFrame(animation);
    }
  };
  
  requestAnimationFrame(animation);
};

しかし、この関数は万能ではなく、細かいスクロールの挙動を追加するとなったら考えるべきものが増えてきます。

cssで実装

例えば以下のようなhtmlがあるとすると

<div class="container">
  <div class="item" style="background-color: #ff6b6b;">
    <h2>Section 1</h2>
    <p>最初のスライド</p>
  </div>
  <div class="item" style="background-color: #4ecdc4;">
    <h2>Section 2</h2>
    <p>2番目のスライド</p>
  </div>
  <div class="item" style="background-color: #45b7d1;">
    <h2>Section 3</h2>
    <p>3番目のスライド</p>
  </div>
</div>

簡単なcssでカルーセルが実装できます。

.container {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

.item {
  scroll-snap-align: start;
  flex: 0 0 100%;
}

おわりに

これらのcssは互換性も優れていて、MDNでもBaseline Widely availableがついています。どんなブラウザでも使えるので使いやすさはさらに上がりますね！

cssだけでも色々できますし、暇な時にもっとMDNを熟読してみたいです。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up