みなさんはカルーセルを作りたいと思ったことはありますか？
今までは、ライブラリーを使ったりしても、アクセシビリティの担保ができてなかったり、
少し複雑なJSを書かなくちゃいけなかったりと、カルーセルを自作するのは大変でした。
しかし、Chrome 135 以降では、CSS Overflow Module Level 5 が適応され、CSSだけで、カルーセルが作れるようになりました。
そのため、この記事では、CSSだけでカルーセルを作る方法を紹介しようと思います。
まずは、このようにカルーセルのコンテナをつくります。
class="carousel">
- class="carousel-item">1
- class="carousel-item">2
- class="carousel-item">3
- class="carousel-item">4
- class="carousel-item">5
.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: "←"https://qiita.com/"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)のフォローをお願いします。
Be the first to comment
