carouFredSelって便利ですよね。
カルーセルを実装する上で、欲しいオプションはだいたい入っています。
かなり便利に使っていましたし、今でも使いますが、スマホ対応（タッチ対応）をしようと思うと、標準だと対応していないので、プラグインを導入する必要がありました。
参考リンク：スマートフォンでカルーセル
ここまでは良かったのです。
スマホでリンクが死んでいる
今日気づいたんですが（遅い）、carouFredSelで動かしているカルーセルのリンクがスマホでタップしても動かなくなっていたのです。
iOS、Androidともに動いてないので、こらアカンとなりました。
carouFredSel自体のコードをパッチして何とかする方法も考えたのですが、結論から言うとカルーセルに使うプラグイン自体を変えました。
新たな力、Owl Carousel
このプラグインの特徴は以下のとおり。
- CSS3準拠
- CSS2でも動くっちゃー動く
- レスポンシブ
- 高速
- 簡単
- スワイプ／タッチ対応
- ドラッグ対応
- 高機能
とまぁバッチリな感じの仕様になっています。デフォルトでレスポンシブ、タッチ／スワイプ対応だったのでこれに差し替えることを決めました。
移行とは言えやることは殆ど無く、jsとcssを読み込み、caroufredselを呼び出しているところを、owlCarouselの呼び出しに書き換えて、その際の設定オプションをowlCarouselのドキュメント見ながら指定し直すだけです。
私の案件の場合、CSSが一部バッティングしたのでもうちょっと、自分のサイト側のCSSを調整する必要がありましたが、ほとんど時間はかかっていません。15分ぐらいですかね？
干渉がなかったところは本当に差し替えるだけで動きました。
JS自体のサイズもcarouFredSelと比較すると10KB以上軽量で、感覚ですがより軽快に動作するイメージです（ベンチとっていませんし、ファイルサイズと動作には直接関係ないですが）。
少なくとも、一回読み込んだスライドをカルーセルとして動作させ始める際の、イニシャライズは確実にowlCarouselの方が軽快で、ガタつきません。
carouFredSelもいいプラグインでしたが、今後はowlCarouselを積極的に使っていこうと思います。
コメント