スマホでcarouFredSelのリンクが動かない問題に対処した話

carouFredSelって便利ですよね。
カルーセルを実装する上で、欲しいオプションはだいたい入っています。
かなり便利に使っていましたし、今でも使いますが、スマホ対応(タッチ対応)をしようと思うと、標準だと対応していないので、プラグインを導入する必要がありました。

参考リンク:スマートフォンでカルーセル

ここまでは良かったのです。

スマホでリンクが死んでいる

今日気づいたんですが(遅い)、carouFredSelで動かしているカルーセルのリンクがスマホでタップしても動かなくなっていたのです。
iOS、Androidともに動いてないので、こらアカンとなりました。

同じ問題にハマっている方もいたようです。

carouFredSel自体のコードをパッチして何とかする方法も考えたのですが、結論から言うとカルーセルに使うプラグイン自体を変えました。

新たな力、Owl Carousel

Owl Carousel

このプラグインの特徴は以下のとおり。

  • CSS3準拠
  • CSS2でも動くっちゃー動く
  • レスポンシブ
  • 高速
  • 簡単
  • スワイプ/タッチ対応
  • ドラッグ対応
  • 高機能

とまぁバッチリな感じの仕様になっています。デフォルトでレスポンシブ、タッチ/スワイプ対応だったのでこれに差し替えることを決めました。
移行とは言えやることは殆ど無く、jsとcssを読み込み、caroufredselを呼び出しているところを、owlCarouselの呼び出しに書き換えて、その際の設定オプションをowlCarouselのドキュメント見ながら指定し直すだけです。

私の案件の場合、CSSが一部バッティングしたのでもうちょっと、自分のサイト側のCSSを調整する必要がありましたが、ほとんど時間はかかっていません。15分ぐらいですかね?
干渉がなかったところは本当に差し替えるだけで動きました。

JS自体のサイズもcarouFredSelと比較すると10KB以上軽量で、感覚ですがより軽快に動作するイメージです(ベンチとっていませんし、ファイルサイズと動作には直接関係ないですが)。
少なくとも、一回読み込んだスライドをカルーセルとして動作させ始める際の、イニシャライズは確実にowlCarouselの方が軽快で、ガタつきません。

carouFredSelもいいプラグインでしたが、今後はowlCarouselを積極的に使っていこうと思います。

スポンサーリンク
Sponsored Link
Sponsored Link

シェアする

  • このエントリーをはてなブックマークに追加

フォローする