Embla Carousel というスライダーの選択肢
- Javascript
- WEB関連

web制作時にスライダーを使うのはもはや通常仕様で、大体の案件で利用している。
ただ、最近webでの表示スピードにこだわるクライアントも増えてきて、
極力速くしたい。
PageSpeed Insights でハイスコアを出したい。
という要望も多い。ただ、デザインであまりにこだわった挙句最後にこの件を持ち出してくる事も多く、いやいや、速くしたいなら引き算大事だから。。とか思ったり。
まあ、そういうわけで、今まで多様してきた類のスライダーではなく軽いスライダーのレパートリーを増やす必要があるわけで、探してみた結果「Embla Carousel」というのを試してみた。
結果は上々。
実装しやすいし、おそらく軽いのであろう。(体感ではわからん)
当エントリはライブラリの実装の仕方を説明する内容ではないので、公式のサイトをリンクしておきます。
→「Embla Carousel」
このライブラリは基本が最小限になっていて、例えばAutoPlayを追加したかったら、それ用のプラグインを入れます。入れ方はCDNを読み込むだけ。
クロスフェードなんかもプラグインで対応。使うものだけ入れるから軽いのね!
ただ一点。スライドの動作に対して「ease-in / ease-out」の様な抑揚がつけられないらしい。
そして公式でもそれに対応するつもりは無いと。。
英語ですがこちら参照( Custom easing #184 )
クライアントがスライダーの動きに目をつけて変化させたいと言い出したらアウトです。
しかも元々の動きが、クイックに動き出しかなりゆったりと止まる動きで、なんか癖っぽい気がするんですよね。僕としてはあまり好きな動きじゃ無いかなぁ。せめてeasr-outくらい止まる時のゆったりもそこそこで、言われなきゃ気づかないくらいの自然な感じが良い。
ここさえ解消されれば、自由度も高く、良いライブラリなんですが・・。
しょうがないので他も探してみようかと思ってます。