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

悩んでいる人

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

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

本記事の信頼性

30歳から異業種への転職をして、Shopify Experts企業で1年半ほどフルリモートで勤務していました。
ShopifyやWordPressのお仕事をすることが多いのですが、現在フリーランスとして働きながら、WEB開発の学習をしております。

僕自身よく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 metho...

まとめ

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

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

スポンサーリンク

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
目次