カルーセル(スライダー)をおしゃれにするCSSスニペット12選。3Dもフルスクリーンも可能！
スタイリッシュなデザインのカルーセルスライダー(carousel)のCSSサンプルをまとめました。
デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインのメニューは利用者の興味を引き付けます。
カルーセル(スライダー)は限られたスペースで複数のコンテンツを回転表示するのに利用されていたり、フルスクリーンカルーセルでサイトデザインと一体化して利用するケース等、デザインのバリエーションを増やすことが出来る便利なパーツです。
本記事ではフォームの中でも「カルーセル」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。
なお、「カルーセル」という呼び方が馴染まない方もいるでしょう。「スライダー」という名称のが一般的かもしれません。以下のように回転してコンテンツを表示するパーツのことを示します。
See the Pen
Carousel (React) by Andy Pagès (@andyNroses)
on CodePen.
フルスクリーンカルーセルの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スニペットシリーズ記事一覧
フォームの各入力要素のスニペットはシリーズ記事化していますので、こちらの記事も参考にしてください。