RTLに対応！スライダーの作り方【商品紹介にぴったり！】

あるモバイルサイトをリニューアルしていた際、はじめはオープンソースのスライダーをそのまま使っていました。そのスライダーはよくできていて、ほとんどの要求を満たしてくれたのですが、ただ一点だけ不満がありました。RTL（Right-to-Left）に対応していなかったのです。

 

結局、そのスライダーのメンテナーはRTLをサポートする気はなく、また簡単な解決法も見つからなかったため、自分たちで新たなスライダーを作る必要に迫られました。

ここでその作り方について紹介しようと思います。

 

 

 

・HammerJS

PhotoViewJS経由でズーム機能を利用するため、既にhammerjsを使っていました。それを前提に話を進めていきます。

 

 

・構造の方針

CSSのtranslate3dなどは、direction:rtlプロパティを変更しても方向を自動で変えてはくれません。解決法はシンプルで、ただグローバルオペレーターを使っている値を無効にするだけです。コードはこのようにするといいでしょう。

 

 

ここで考えてみてください、もし方向を考える必要がなくなればもっと良いと思いませんか？LTR（Left-to-Right）においては「次」とは右方向に進むこと、RTLでは逆方向に進むことです。そこでCSSの論理プロパティを参考に、一箇所のグローバル設定で全てを決定するようにして、様々なケースを細々と設定していくのはやめにしました。

 

 

 

 

 

・他のプラグインとの共存

画像のズームを制御しているPhotoViewJSはhammerに依存しており、スライドやズームのためにどのタイミングでパンすべきか決定するのに問題が発生します。この問題はスライダーにメソッドを追加し、ハンドラーの有効化と無効化を切り替えれば解決できます。

 

 

これはPhotoViewJSからイベントが伝わった時に呼び出されます。

 

 

またイベントを使って、スライダーが初期化された後にPhotoViewJSを初期化することもできます。

 

 

 

 

 

・まとめ

このようにして、私たちはRTLをサポートしたスライダーを制作しました。GitHubにソースを公開していますので、ぜひ利用してみてください。

 

 

 

※本稿は 「Slim Slider: Yet another Javascript slider」を翻訳・再編集したものです。