CSSのみで凝ったカルーセルを実装する

ここで扱うのはカルーセルですが、スライダーやスライドショーと混同されることが多いので、あなたが思うコンテンツを複数枚横に並べてスライドできるコンポーネントはカルーセルかもしれません。

ともかくモダンブラウザの多くでは、CSS Overflow Moduleなどに定義されている機能を利用することで、CSSのみで凝ったカルーセルを実装することができます。次のカルーセルはJavaScriptを一切利用せずに実装しています。

html

<style>
.carousel {
    position: relative;
    isolation: isolate;
    ul {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 240px;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
        max-width: 100%;
        scroll-behavior: smooth;
        li {
            scroll-snap-align: center;
        }
        &::scroll-button(inline-start) {
            content: url("data:image/svg+xml;base64,PHN...=") /
                "Scroll left";
            left: 16px;
        }
        &::scroll-button(inline-end) {
            content: url("data:image/svg+xml;base64,PHN...=") /
                "Scroll right";
            right: 16px;
        }

        &::scroll-button(*) {
            inline-size: 48px;
            aspect-ratio: 1;
            border-radius: 100%;
            background-color: oklch(0.99 0.005 200);
            border: 1px solid oklch(0.9 0.02 200);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            padding: 0;
            transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 1;
        }
        &::scroll-button(*):disabled {
            opacity: 0;
        }
        &::scroll-button(*):hover {
            scale: 1.1;
        }
    }
}
</style>
<div class="carousel">
    <ul>
      <li><img src="https://picsum.photos/id/100/300/200" alt="100"></li>
      <li><img src="https://picsum.photos/id/101/300/200" alt="101"></li>
      <li><img src="https://picsum.photos/id/102/300/200" alt="102"></li>
      <li><img src="https://picsum.photos/id/103/300/200" alt="103"></li>
      <li><img src="https://picsum.photos/id/104/300/200" alt="104"></li>
    </ul>
</div>

＊この記事では、実際にCSSのみでカルーセルを実装する際の注意点をいくつか紹介するのみです。基礎的な機能についてはCSSカルーセルを試すを参照してください。

#ボタンに任意のアイコンを入れる

::scroll-button()疑似要素を利用することで、始点と終点へのスクロールを誘発するボタンを配置することができます。しかし、中身のコンテンツはcontentプロパティを利用して指定する必要があるため、任意のアイコンを利用したい場合は画像をbase64エンコードしたり、画像のパスを指定する必要があります。

css

ul::scroll-button(inline-start) {
    content: url("data:image/svg+xml;base64,PHN...=") / "Scroll left";
}
ul::scroll-button(inline-start) {
    content: url("../images/chevron-left.png") / "Scroll left";
}

/ "Scroll left"は代替テキストであり、スクリーンリーダーなどではこのテキストが読み上げられます。

#スクロールバーを非表示にする

まずブラウザ標準のスクロールバーをデザイン性から気軽に非表示したり見た目を変更することは避けましょう。ユーザーに混乱を招く可能性が高いです。

ですが、どうしても非表示にしたい場合もあります。そこで雑にoverflow: hiddenを指定しまうと、カルーセルのボタンを押した際の挙動などは維持されるものの、モバイルでのスワイプ操作やキーボード操作などはできなくなってしまうため、次のようにする必要があります。

css

ul {
  overflow-x: auto;
  scrollbar-width: none;
}

scrollbar-widthは、IEなどレガシーなブラウザでなければ利用できます。