Slider Proのレスポンシブ処理について

スライダーの中で、文字テキストや画像を個別にアニメーションさせたい時、一番多く使うのが「Slider Pro」なのですが、レスポンシブの時、スマホだと画像のサイズがうまく調整できないことがあります。
「Slider Pro」にはもともと「autoScaleLayers」というオプション設定があり、レスポンシブの際に縮小率を自動的に計算するようになっているみたいなのですが、AndroidとiPhoneでも挙動が違ったりして、かえって設定が難しいので、以下のように処理しています。

この方法をとった場合、PCの方は「autoScaleLayers」は設定しなくてもいいかなという感じです。

PCとスマホで別のjsファイルを読み込ませる

まずjsファイルを分岐させます。ワードプレスの場合は、is_mobile関数を自作します。

モバイル専用のjsファイルを作ります

is_mobileでPCとスマホで別のjsファイルを読み込ませます。

スマホ用のスライダーを作成する

is_mobileでjsを別に読み込ませるのと同様、スライダーのhtmlもスマホ専用のものを別に用意します。大抵は、PC用のものを少し改変して、画像サイズ・文字サイズを指定し直す程度でいけます。