[CSS] フォーカス・カルーセル

ホームページでよく使われるカルーセル（横スライド）は、機能やデザインが多種多様になってきています。 もちろん、ホームページのクオリティにも大きく影響するため、良い感じに使えるカルーセルを模索しています。 今回は、フォーカス・カルーセルという、複数ある画像やコンテンツの中から中心の１つをフォーカスピックアップして見せて、それ以外はボカして表現するようにすることで、 少し印象深く、よりターゲットコンテンツに注目しやすくなる機能のカルーセルです。 githubにもアップしているので、cloneしてお好きにお使いください。

デモ

githubリンク

https://github.com/yugeta/focus_carousel

あとがき

今度作るホームページでこのカルーセルを使おうと思って作ってみました。 どこかで見かけたら思い出してやってください。 実は現時点で少しバグがありまして、無限ループ処理の、エレメントを移動させるJavascriptの処理で、カルーセル表示がガクついてしまいます。 どうやって解消しようか悩み中なんですが、とりあえず、見えるからいいや・・・という程度で簡易ロンチしてしまいました。 あと、ページネーション機能や、移動ボタンなど、カルーセルとして必要な機能はまだ足りていないんですが、その辺は力技で追加すると思います。 ※後程アップデートしようと予定しています。 とりあえず、いろいろなカルーセルを作りためて置こうかなっと！