お問い合わせはコチラから

【Swiper】サムネイル連動時のスライド切り替えで画像がちらつく現象の対策

サイト運営

Swiperを使って、メインスライダーとサムネイルスライダーを連動させたときの話です。

ネットで検索すると、それらしい実装例が出てくるので、そのまま使ったのですが、iphone実機で確認するとスライド切り替え時にフリッカーのような白いノイズが一瞬表示される現象が起きました。

いつも起きるわけではなく、サムネイル側をフリックしていってフリックを止めた時にメインスライダー側にたまに発生する現象です。

実機iphoneだけで発生する問題なのでデバッグもできず、解決までに結構時間がかかりました。

同じように困っている人がいるかもしれないのでメモしておきます。

Swiperでサムネイル連動スライドを実装する

この辺の記事が参考になります。

公式(最新版なのでVer4系は非対応)

Swiper - Thumbs gallery - CodeSandbox
Swiper - Thumbs gallery using parcel-bundler, swiper

Ver4対応

Attention Required! | Cloudflare
Attention Required! | Cloudflare

Swiperのスライド時のちらつきを無くす対策

-webkit-backface-visibility: hidden;

を追加しろという記事をよく見かけます。

swiper.js使ってみたからそのオプションについて(v4.1.6) | なんかいろいろデザインする人
これは旧バージョンのswiperのオプションについて書いた記事です。最新版(6系)のオプションについてはこちらにあります 以前もswiper.jsのオプションについて書いた記事を書いたんだけど、久しぶりに公式見たら一新さ … 続きを読む swiper.js使ってみたからそのオプションについて(v4.1.6)

私のケースはそれではダメでした。

最終的に

-webkit-transform-style: preserve-3d;

を追加することで、フリッカーは無くなりました。

.swiper-slide {
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
}

まとめ

iphone実機で不具合が起きると、実機デバッグできる環境がないとお手上げになります。

その場合、ネットで検索した情報を頼りにするしかありません。

今回は、色々調べる手間はありましたが、最終的にネットにある情報で解決できたので幸運でした。

タイトルとURLをコピーしました