日々ITを継続している、ユゲタです。
嫁曰く、毎日、四六時中、どこでもノートパソコンを開いて、仕事だかなんだか分からないけど、カタカタとキーボードを叩いている僕が奇妙に見えるそうです。
仕事も遊びも、パソコンを使っていれば、２４時間費やすことができるので、他人から見たらそう思われても仕方がないのですが、おかげでうちの家族も生活できていると、考えると、嫁には理解してもらいたいですね。
本日のIT謎掛け
「カルーセル」と、かけまして・・・
「カンニングペーパー」と、ときます。
そのココロは・・・
小さな領域に、多くの情報を、詰め込むことができます。
以前作ったカルーセルライブラリ
自分の会社のホームページにも採用している、非常に軽いカルーセル機能ですが、ページ内で複数の箇所に設置する場合に、不具合が発生することが分かったので、リファクタリングも兼ねて、バージョンアップさせました。
以前のカルーセル紹介記事
[Tools] 非常に軽いカルーセル・ライブラリ作りました
カルーセルについて、よく分かっていない人は、以前記事を見てご確認ください。
今回のバージョンアップ内容
複数表示不具合に対応する他に、ついでにできる機能追加をいくつか行いました。
1. 内包するアイテムが無限にループのをOFFにできる機能。
2. スマホで見る場合にカルーセルで横移動している時に、画面が縦移動してしまう挙動を縦移動させなくする機能。
3. 各種ボタンの表示可否
4. アイテムの表示位置
アップデートしたおかげで、より安定したツールになりました。
1. 内包するアイテムが無限にループのをOFFにできる機能
この機能は、アイテムの開始地点と終了地点が、無限ループすると、わかりにくくなるという点を解消する目的で、
ショッピングサイトなどの商品順番を重要視しているようなサイトでは、有効に機能します。
しかし、ランダムにレコメンドするような表示の場合は、無限ループさせて使ったほうが有効的ですけどね。
ちなみに、カルーセルの領域内に複数のアイテムを表示させる場合、表示エリアよりも、アイテム表示幅が小さい場合は、無限ループ機能自体が機能しません。
2. スマホで見る場合にカルーセルで横移動している時に、画面が縦移動してしまう挙動を縦移動させなくする機能
スマートフォンで便利に横スクロールさせるカルーセル機能ですが、今回のツールは、同時に縦スクロールもできてしまいます。
縦スクロールもできてしまうのが、操作的に気持ち悪いという場合も考えて、縦スクロールさせないようにするフラグを用意しました。
ただし、画面いっぱいにカルーセルアイテムが表示するようなページの場合、縦スクロールが一切機能しなくなるので、その場合は、使用しないようにしてください。
今後のアップデートで、自動判別するようにします。
3. 各種ボタンの表示可否
ページネーションと、左右の切り替えボタンが、デフォルトでは自動表示されますが、ページ側のCSSで、装飾変更してもらってもいいのですが、指スライドだけで十分という場合は、この表示をOFFにできるオプション機能を設けました。
スッキリとしたスマートなページの場合、こうしたボタン類って、いらないというケースもありますからね。
4. アイテムの表示位置
今回、とあるアパレルサイトで使用する事を前提として機能をつけたのですが、商品一覧を表示した時に、センタリング表示だと、都合が悪いというデザインだったため、
左寄せを可能にしたバージョンを設けました。
ちなみに、右寄せっていうのが、あまり想定できなかったので、今回はセンタリングと、左寄せのみの機能になっています。
そして、左寄せの場合、無限ループをOFFにすることで、より効果的なページに仕上がることでしょう。
Githubでダウンロードできます
紹介したツールは、Githubにアップロードしているので、cloneして便利にお使いください。
https://github.com/yugeta/carousel
使いたいけど、使い方がよくわからない人へ
もし、このツールを気に入っていただいて、使いたいんだけれど、設置方法などがよくわからないという方は、
この記事にコメントをいただければ、不明点などを説明させていただきます。
無駄にページが重くなるカルーセルツールを使うのはもうやめましょう。
0 件のコメント:
コメントを投稿