［CSS］使わずにはいられない無料カルーセルスライダーの作成法10選

無料のJavaScriptベースのスライダープラグインはネット上にいくらでもあります。性能もよく、どのブラウザにも対応していますが、最近だと、Pure CSSでこうした機能を作り直す必要が出てきました。

 

カルーセルにはそれぞれのスタイルがあるので、最適な作り方というのはありません。しかし、ここではCodePenからカルーセルのテンプレートとして使えるオープンソースのスニペットを10種類集めました。

 

デザインや動きは異なりますが、すべてCSSのそのままのコードで動作します。

 

Netflix Show Carousel

 

See the Pen
Pure-CSS Netflix Show Carousel by Josh Hunt (@joshhunt)
on CodePen.

 

このNetflix Carouselは各動画にホバー・拡大エフェクトがかかっておりかなりユニークになっています。カルーセル内のリンクはどこにもつながっていませんが動画を扱うのに簡単に埋め込みできます。

 

このバージョンはCSSのみで作られているため動画のモーダルウインドウなどのダイナミックな効果を付けるのは難しいです。どんなブラウザでも機能するNetflix風のホバーアニメーションのスライダーを作るのにはこのテンプレートが使えます。

 

Annotated Linear Carousel

 

 

See the Pen
Pure CSS, annotated linear carousel by Paul Noble (@paulnoble)
on CodePen.

 

カルーセルによってはスライド内に字幕などの追加コンテンツを挿入するための注釈機能があります。このHTML、CSSのみで書かれたコードを使うことでこの効果が実現できます。

 

矢印やドットのナビゲーション要素がないため、スライドはクリックかタッチで操作します。スライドの左か右をタッチするとすぐにそのスライドが出てきてくれます。スライドは無限に回り続けるため、どちらの方向にも行き止まりがありません。

 

それぞれの動きにはCSSによるわずかなフェーディングエフェクトがかかっています。シンプルなUIテンプレートとして見事に機能します。

 

Fading Carousel

 

 

 

See the Pen
Simple Carousel Pure CSS by Dang Van Thanh (@dangvanthanh)
on CodePen.

 

少しすっきりとした消え入るエフェクトのUIテンプレートで、両方向のドットナビゲーションと矢印があります。矢印がラジオボタンのように機能するよう、CSSで制御されています。

 

それぞれのHTMLによるラジオボタンは違う画像とリンクしているので、簡単にスライドを次々と表示することができます。消え入るようなエフェクトはこちらのカルーセル用のSassライブラリのミックスインでCSSによって作ってあります。

 

Responsive Slideshow

 

 

See the Pen
Responsive Slideshow / Carousel with only HTML5 & CSS3 by Trung Vo (@trungk18)
on CodePen.

 

こちらもCSSによるラジオボタン式カルーセルで、キャプションも追加されています。Vo Tuan Trung さんが作成したテンプレートで、完全レスポンシブでどのブラウザにも対応しています。

 

CSSはすべてSassで書かれており、追加機能にはBourbonミックスインが使われています。スライドのアニメーションはコンテンツの動きに合わせて左右に動きます。おしゃれなエフェクトで、CSSだけで書かれているにしては芸が細かいです。

 

CSS3 Testimonials Slider

 

 

See the Pen
Testimonial Slider Pure CSS by MAHESH AMBURE (@maheshambure21)
on CodePen.

 

推薦文のカスタムテンプレートは企業サイトやランディングページで一般的に使われます。この推薦文用スライダーはCSSのみを使ってアニメーションが作ってあるので埋め込みやすく動作も軽いです。

 

デザインも今風でシンプルです。余分な色や、テクスチャ、デザインがありません。

 

もう少し細かいテンプレートが欲しい方は同じくSara Soueidanさんの作成したこちらのコードもご覧ください。コンパクトながらも、デザインにより雰囲気が出ています。

 

Picture Frame

 

 

See the Pen
Pure CSS Featured Image Slider by Ruediger Stursberg (@stursberg)
on CodePen.

 

CSSのトランジションやkeyframeアニメーションでかなりのことができます。このPicture Frameのスライドは、シンプルなスライドでどれだけのことができるかを証明しています。

 

シンプルなスライドアニメーションで、写真が横に移動します。フレームはpure CSSで作られているので、どんなサイズの写真でも挿入できます。非常に素敵ですね。

 

Dark UI

 

 

 

See the Pen
Pure CSS Slider by Damian Drygiel (@drygiel)
on CodePen.

 

暗い色のテーマにはこの黒い背景のCSSスライダーがいい見本になります。緑色が目を引き、強力なキャプションアニメーションもあります。

 

このスライダーはシンプルで使いやすく、アニメーションも一流です。CSS3のみで書かれているというのが驚きです。まさに今はwebデザインの黄金期ですね！

 

CSS Image Carousel

 

 

See the Pen
Pure CSS image carousel by James Holderness (@j4_james)
on CodePen.

数行のコードに手を加えるだけで、この画像カルーセルをいろいろと変化させることができます。写真の周りに小さいフレームを付けるのにCSSが使われています。

 

このテンプレートではアニメーションが使われていないので、動きはラフで直接的です。

 

しかしすべて100行のCSSにより成り立っており、Sassは使っていないため、どんなレイアウトにも簡単にコピー＋ペーストできます。

 

Pure CSS3 Carousel

 

 

See the Pen
Pure CSS3 Carousel (No Javascript) by Hélio Marcondes (@haykou)
on CodePen.

 

固定サイズの画像スライダーの開始点をすっきりさせたいなら、Hélio Marcondesさんによるこのデザインをチェックしてみてください。

 

背景がテキストとともにシンプルなアニメーションでスライドします。こちらも80行以下のCSSと数十行のHTMLだけで作られています。

 

pure CSSでカルーセルを作るのには一番シンプルなテンプレートでしょう。完ぺきではありませんが、開始点は見事です。

 

Text Carousel

 

 

 

See the Pen
Pure CSS3 Text Carousel by Cassidy Williams (@cassidoo)
on CodePen.

 

テキストカルーセルは推薦文や様々な引用をホームページに載せるのに大変役立ちます。複雑なJavaScriptコードを使いたくないなら、このCSSのみで作られたテキストカルーセルがおすすめです。

 

それぞれのテキストの塊にアニメーションがついており、5つの引用文が同じ動きをします。CSSのクラスを追加・削除するだけでテキストの数が増減できるため、編集も簡単です。

 

もう少し凝ったテキストのみのカルーセルをお探しでしたら、Matthew Hirschさんによるこちらも参考にしてみてください。

 

ほかにもネット上にいい例が転がってますが、筆者の知らないものも数多くあることでしょう。興味が出たら、CodePenのcarouselタグから更なるテンプレートを探してみてください。