『slickで実装したスライダーの2周目になるとちらつく』『色々CSSを試してみたけど、どうしてもslickがちらつく』
こういった疑問に答えます。
本記事の内容
- slickスライダーの2周目がちらつく理由
- slickスライダーの2周目がちらつくのを解消
Webエンジニア歴1年
WordPressの運営＆立ち上げ70サイト以上かかわっている
こういった私が解説していきます。
1. slickスライダーの2周目がちらつく理由
- その①：2周目がちらつく理由
- その②：ちらつく動作の解説
その①：2周目がちらつく理由
結論からいいます
1枚目のスライドが最後に複製されて、重なりながら1枚目に戻るからです。
さらにCSSアニメーションも影響があるようなので、実際にコードで見ていきましょう。
その②：ちらつく動作の解説
ちらついた状況はこんな感じ
使っていたjQueryとslickのバージョンはこちら
- jQueryのバージョン：3.6.1
- slickのバージョン：1.8.1
transitionを切るとこんな感じでパッパッと切り替わります。
実際、ページをめくるようなスライダーより、fadeで現れるスライダーの方がちらつきませんでした…
クラス名『slick-track』の要素に『transform:translate3d(-2020px, 0px, 0px);』と3dで指定が入っています。
どうやら、3dの指定にテコ入れをしてあげれば、解決できるかもしれませんね。
1. slickスライダーの2周目がちらつくのを解消
- その①：CSSで3dに指定
- その②：それでもダメならバージョン確認
その①：CSSで3dに指定
slick-slideにCSSを指定します
あれこれCSSを書きましたが、これに落ち着きました。
|
1 2 3 4 5 6 |
/* slick-slideに指定 */ .slick-slide{ height: auto!important; -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d; } |
大体、直るかと思います。
preserve-3dは要素を3d空間で見ていきますよ～っていう指定です。
backface-visibilityは3dにある要素の裏面を表示するかのプロパティです。
その②：それでもダメならバージョン確認
私もバージョンを変更しました。
- jQueryのバージョン：3.6.1
- slickのバージョン：1.8.1 ⇒ 1.9.0
|
1 2 3 4 5 6 7 8 |
/* functions.phpで読込み */ function mytheme_scripts() { wp_deregister_script('jquery'); wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js'); wp_enqueue_style('slick-css', '//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css', array(), '1.9.0' ); wp_enqueue_script('slick-carousel', '//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js', array( 'jquery' ), '1.9.0'); } add_action( 'wp_enqueue_scripts', 'mytheme_scripts' ); |
現状、このような対策で改善できました。
もし、解決できなかった…という方は、お問い合わせからご質問ください。
一緒に解決していきましょう。
以上、slickスライダーの2周目がちらつく理由と解消法をご紹介しました。
ではまた。
