Pure CSSで滑らかなカルーセルを構築する

長年にわたり、カルーセルを作成するにはSwiperやGlideのようなJavaScriptライブラリに頼る必要がありました。それぞれがバンドルに数キロバイトを追加し、依存関係を導入し、イベントリスナーと状態の慎重な管理が必要でした。しかし、モダンなCSSは静かに進化し、JavaScriptを必要とせずにカルーセルをネイティブに処理できるようになりました。

この記事では、scroll-snap、実験的な疑似要素、その他のpure CSSテクニックを使用して、パフォーマンスが高くアクセシブルなCSSカルーセルを構築する方法を探ります。これらの技術は現在動作し、今後何年も関連性を保ち続けます。

基礎:Scroll Snap CSS

pure CSSカルーセルの基礎となるのは、scroll-snapプロパティです。わずか数行で、スクロール可能なコンテナをページネーション体験に変換します:

.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

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

これにより、各アイテムが所定の位置にスナップする水平カルーセルが作成されます。mandatoryキーワードは、ユーザーが常に完全なスライドに着地することを保証し、scroll-behavior: smoothはアイテム間に流動的なトランジションを追加します。

Scroll Snap CSSはすべてのモダンブラウザで動作するため、JavaScriptフリーのカルーセルにとって最も信頼性の高い基盤となります。レスポンシブデザインの場合は、CSS Gridと組み合わせるか、flex-basisを調整してビューごとに複数のアイテムを表示します:

.carousel-item {
  flex: 0 0 calc(33.333% - 1rem);
  margin: 0 0.5rem;
}

モダンなナビゲーション:実験的な疑似要素

Chrome 135+では、カルーセルコントロールを自動的に生成する実験的な疑似要素が導入されています。これらの機能を使用するには、Chromeフラグで実験的なWebプラットフォーム機能を有効にする必要があります。

::scroll-button疑似要素は、追加のマークアップなしで前へ/次へボタンを作成します:

.carousel::scroll-button(inline-start),
.carousel::scroll-button(inline-end) {
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 1rem;
  border: none;
}

.carousel::scroll-button(inline-start)::before {
  content: "←";
}

.carousel::scroll-button(inline-end)::before {
  content: "→";
}

同様に、::scroll-markerは各スクロール可能なセクションのページネーションドットを生成します:

.carousel {
  scroll-marker-group: after;
}

.carousel-item::scroll-marker {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
}

.carousel-item::scroll-marker:target-current {
  background: #333;
}

これらの疑似要素は実験的であり、構文が変更される可能性があることに注意してください。:target-current疑似クラスは、ユーザーがスクロールするときにアクティブなマーカーをハイライトします。これらの機能は、ネイティブなアクセシビリティサポートを提供しながら、JavaScriptの要件を削減します。

本番環境向けのフォールバック戦略

scroll-buttonとscroll-markerはブラウザサポートが限定的であるため、@supportsで機能検出を使用します:

/* フォールバックナビゲーション */
.carousel-nav {
  display: flex;
  gap: 0.5rem;
}

/* ネイティブコントロールがサポートされている場合はフォールバックを非表示 */
@supports (scroll-button-inline: both) {
  .carousel-nav {
    display: none;
  }
}

より広い互換性のために、scroll-snapとアンカーリンクを組み合わせてナビゲーションを実現します:

<nav class="carousel-nav">
  <a href="#slide1">1</a>
  <a href="#slide2">2</a>
  <a href="#slide3">3</a>
</nav>

<div class="carousel">
  <div id="slide1" class="carousel-item">...</div>
  <div id="slide2" class="carousel-item">...</div>
  <div id="slide3" class="carousel-item">...</div>
</div>

JavaScriptなしのCSS自動再生カルーセル

CSS自動再生カルーセルを作成するには、キーフレームアニメーションのみが必要です:

@keyframes slide {
  0%, 20% { transform: translateX(0); }
  25%, 45% { transform: translateX(-100%); }
  50%, 70% { transform: translateX(-200%); }
  75%, 95% { transform: translateX(-300%); }
  100% { transform: translateX(0); }
}

.autoplay-carousel {
  display: flex;
  animation: slide 12s infinite;
}

.autoplay-carousel:hover {
  animation-play-state: paused;
}

このテクニックは確実に動作しますが、シンプルさと引き換えにユーザーコントロールを犠牲にします。ホバー時の一時停止はユーザビリティを向上させ、prefers-reduced-motionと組み合わせることでアクセシビリティの設定を尊重します:

@media (prefers-reduced-motion: reduce) {
  .autoplay-carousel {
    animation: none;
  }
}

アクセシビリティとパフォーマンス

Pure CSSカルーセルはパフォーマンスに優れています—JavaScriptの解析、イベントリスナー、レイアウトスラッシングがありません。ブラウザのネイティブスクロールが、タッチ、キーボード、マウス入力を自動的に処理します。

アクセシビリティのために、以下を確認してください:

• scroll-snapは滑らかなスクロールを提供しますが、完全なキーボードナビゲーションとアクセシブルなコントロールには、新しい::scroll-buttonと::scroll-marker機能が必要です
• フォーカスインジケーターが表示されたままになる
• CSSが失敗した場合でもコンテンツにアクセスできる
• タッチターゲットが44×44pxの最小サイズを満たす

ARIAラベルを追加して、スクリーンリーダー体験を向上させます:

<div class="carousel" role="region" aria-label="Product Gallery">
  <div class="carousel-item" aria-label="Slide 1 of 3">...</div>
</div>

まとめ

モダンなCSSは、ほとんどの場合、JavaScriptカルーセルライブラリの必要性を排除しました。scroll-snapは現在の基盤を提供し、scroll-buttonやscroll-markerのような新興機能は、複雑なUIコンポーネントがJavaScriptをまったく必要としない未来を予告しています。これらのテクニックは、バンドルサイズを削減し、パフォーマンスを向上させ、メンテナンスを簡素化します—時間とともに複利的に増大する利点です。

本番サイトではscroll-snapから始めましょう。Chromeで新しい疑似要素を試してみましょう。最も重要なのは、20行のCSSで同じ結果が得られるのに、50KBのカルーセルライブラリが本当に必要かどうかを問うことです。

よくある質問

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..