[Tools] 非常に軽いカルーセル・ライブラリ作りました

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

ホームページの上部に設置されているバナーで左右にスライドするモノを「カルーセル」と言います。
 

ホームページ制作に関係している人であれば、通じる名前なんですが、名称としてはあまり知られていない感じがします。
 

ちなみに、「カルーセル(carousel)」は日本語に直訳すると「回転木馬」なのだそうで、ホームページを彩るいい名称だな・・・と思いました。
 

カルーセルを設置したホームページの効果

さて、このカルーセルは、一体どういう効果があるのでしょうか?
 

単一のバナーでなく複数のバナーを一定時間で切り替えることができることと、ユーザーが画面をスクロールさせずに、クリックするだけでバナーが選べる機能性で、ECサイトなどで使うと広告とリンクの役割を果たしてくれるため、ECサイトなどで活用されています。
 

そういえば、Amazonのトップページでも使われていますね。
 

色々なカルーセルを試してみたんですが、使いにくさ、導入したらホームページが重くなってしまうなど、使用できないライブラリが多かったので、自作してしまおうと思い、作ってみました。
 

シンプルな基本機能だけしかありませんが、よほど変わったことがやりたい人以外はこれで十分だと思いますので、気になった人は使ってみてください。
 

jQueryなど他のライブラリも一切使わないので、非常に軽く動作しますよ。

使い方

1. HTMLにカルーセルエリアを構築

3. ページ下部に、carousel起動コマンドをscriptタグとして記述

ヘッダタグに、carousel.jsをセット

ページ下部に、carousel起動コマンドをscriptタグとして記述

Source

 

 

 

Download

Github
 

https://github.com/yugeta/carousel

Demo

Codepen
 

See the Pen
lite-carousel
by YugetaKoji (@geta1972)
on CodePen.

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です