slickスライダーでiOSのChromeでのみカクツキが発生するときの対処法

悩んでいる人

slickを使ってスライダーを実装したんだけど、iOSのChromeで見るときだけカクツキが発生するのよね

本記事では上記の悩みを解決します。

本記事の信頼性

30歳から異業種への転職をして、Shopify Experts企業で1年半ほどフルリモートで勤務していました。
現在は名古屋の自社開発企業のフロントエンドエンジニアしています。フリーランスとしても活動しています。

僕自身よくslickを使って、スライダー機能を実装することがあるのですが、iOSで見るとなぜかカクツクという現象に頭を悩ませることがありました。

今回改めて調査してみると1行足すだけで解消したのでご紹介します。

slickの公式ドキュメント

https://kenwheeler.github.io/slick/

追加するコード

$('.multiple-items').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 3,
  // この1行
  useTransform: false
});

CSSのtransformプロパティを有効・無効にすることができるようです。

参考

GitHub

Slider swipe choppiness on IOS, Chrome · Issue #4123 · kenwheeler/slick We noticed an issue with swipe choppiness on Chrome, IOS. And this issue happens on all our clients' sites and projects that we support. Are there any methods t...

まとめ

公式ドキュメントかGithubのリポジトリを探しに行くのが結局解決は一番はやいかもと思いました。

余談ですが、slickよりもSwiperのほうがいいよという声もあるので僕も乗り換えようかなぁと思っています。