カルーセル(スライダー)をおしゃれにするCSSスニペット12選。3Dもフルスクリーンも可能！
スタイリッシュなデザインのカルーセルスライダー(carousel)のCSSサンプルをまとめました。
デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインのメニューは利用者の興味を引き付けます。
カルーセル(スライダー)は限られたスペースで複数のコンテンツを回転表示するのに利用されていたり、フルスクリーンカルーセルでサイトデザインと一体化して利用するケース等、デザインのバリエーションを増やすことが出来る便利なパーツです。
本記事ではフォームの中でも「カルーセル」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。
なお、「カルーセル」という呼び方が馴染まない方もいるでしょう。「スライダー」という名称のが一般的かもしれません。以下のように回転してコンテンツを表示するパーツのことを示します。
See the Pen
Carousel (React) by Andy Pagès (@andyNroses)
on CodePen.
カルーセルスライダーの基本形（Pure CSS、自動回転、スワイプ回転）。シンプルでわかりやすいCSSデザイン例。
基本的なCSSのみカルーセル その①
See the Pen
A CSS-only Carousel Slider by Christian Schaefer (@Schepp)
on CodePen.
CSSのみで実装されたカルーセルのサンプルです。
横のボタンをタップすると、コンテンツがスライドして切り替わります。カルーセルスライダーの基本形がよくわかるサンプルですね。
基本的なCSSのみカルーセル その②
See the Pen
Simple Carousel Pure CSS by Dang Van Thanh (@dangvanthanh)
on CodePen.
こちらもCSSのみで実装されたカルーセルのサンプルです。
スライダーではなくフェードアウト・フェードインでコンテンツが切り替わります。カルーセルのコンテンツの切り替えはスライド・フェード・回転（迫り出し）が多いですが、その中でもフェードする動作はスマートなデザインに馴染みやすいです。シンプルですがカルーセルの基本的な仕組みが非常にわかりやすいサンプルですね。
自動回転するカルーセルスライダー
See the Pen
bootstrap 3 multiple items responsive carousel by Oleksandr Zinchenko (@Qvatra)
on CodePen.
このデザインサンプルはJSでの処理実装もありますが、コンテンツが自動で回転して切り替わるようになっています。
「手動で切り替えるカルーセル」「自動で切り替えるカルーセル」「両方を実装したカルーセル」の3パターンがありますが、どのパターンを採用するか検討する上で参考になりますね。
スワイプ、ボタン、自動で回転する複合カルーセル
See the Pen
Owl Carousel 2 Testimonial Slider by shamim khan (@shamim539)
on CodePen.
こちらもサンプルは、下のボタンのクリック、左右のスワイプ動作、自動回転の3パターンでコンテンツが切り替わるようになっている複合形カルーセルです。
アクティブになるときに回転して迫り出すように表示される点と、非アクティブのコンテンツが半透明表示になっているのが非常にスタイリッシュです。
フルスクリーンカルーセルのCSSデザイン例。画面全体のスライド表示で美しいサイトデザインを実現！
Pure CSSのフルスクリーンカルーセル
See the Pen
Bootstrap Slider Full Screen with Animations by afmarchetti (@afmarchetti)
on CodePen.
サイトデザイン全体に組み込みたいフルスクリーンカルーセルのデザインサンプルです。
これだけデザイン性に優れているのに、Pure CSSで実装されているのが素晴らしいです。サイト全体のデザインを考える上で非常に参考になるサンプルです。
画面背景がフェードで切り替わるシンプルカルーセル。
See the Pen
Bootstrap Carousel Fade Transition by Roland Warmerdam (@Rowno)
on CodePen.
画面背景の色がフェードで切り替わるシンプルなカルーセルのサンプルです。
実装量が非常に少ないです。基本の形が非常にわかりやすいですね。
サイトデザインと融合したフルスクリーンカルーセル その①
See the Pen
Simple Synchronised Carousel by Rian Ariona (@ariona)
on CodePen.
画像を上手に使ったフルスクリーンカルーセルです。
非アクティブのコンテンツ画像が後ろでモザイク表示でスライドしていく動きが非常にスタイリッシュ。ウェブサイトのトップページなどでダイナミックに使いたくなるデザインサンプルです。
サイトデザインと融合したフルスクリーンカルーセル その②
See the Pen
FlexBox Exercise #3 – Image carousel by Veronica (@veronicadev)
on CodePen.
非常に美しいサイトデザインです。
左側の文字コンテンツと右側の画像コンテンツが独立した動きで切り替わっていきます。
3DカルーセルのCSSデザイン例。ユーザの目を引くリッチな見た目・動きでコンテンツを表示！
奥行の立体感を上手に使った3DカルーセルのCSSデザインサンプル
See the Pen
3d carousel slider with vue js by shamim khan (@shamim539)
on CodePen.
デザイン自体は非常にシンプルなのですが、美しい3Dカルーセルです。
白黒のコントラストとスライドの動きと遠近で奥行を感じさせるデザインが非常にマッチしています。これこそ3Dカルーセルの真骨頂といった感じでデザインサンプルです。
楕円回転タイプの3Dカルーセル その①
See the Pen
CSS 3D Carousel by Jesper Hills (@nopr)
on CodePen.
楕円で回転して立体感を表現しているタイプの3Dカルーセルです。
この手のデザインサンプルはソースコード量が多くなりがちですが、少ない実装で最低限の表現を実現している優秀なデザインサンプルです。
楕円回転タイプの3Dカルーセル その②
See the Pen
3D Carousel Gallery by Dudley Storey (@dudleystorey)
on CodePen.
こちらも楕円で回転して立体感を表現しています。
様々な画像が空中に浮いているように表示されているのが良いです。
カードタイプの3Dカルーセル
See the Pen
3D Carousel by Yoav Kadosh (@ykadosh)
on CodePen.
こちらはカード表示タイプの3Dカルーセルです。
スクリプトがBabelで書かれており、ちょっと構造がわかりにくいですが、見た目が非常に綺麗なデザインサンプルですね。
ウェブサイトのフォームをおしゃれにするCSSスニペットシリーズ記事一覧
フォームの各入力要素のスニペットはシリーズ記事化していますので、こちらの記事も参考にしてください。
https://kodocode.net/design-css-textbox/
