無料の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風のホバーアニメーションのスライダーを作るのにはこのテンプレートが使え
スポンサーリンク
無料で使えるオープンソースのスニペット CSSのみで実装が可能なカルーセルスライダー10選
マーケティング最新
コメント