古いバージョンのためか情報が見つからず、色々試して得た情報をメモとして。
前提
- WordPressのレガシーテーマ(ページ用テンプレートファイルにHTMLやPHP等を直書き状態)
- Swiper v11を使用
- 画像ではなくカード型コンテンツを6つ並べて、自動再生かつループさせる
- slidesPerView: "auto"を記述し、1画面内のカード枚数を指定してループさせるのではなく、固定幅のカードを並べてループさせる
v11は古いバージョンであり、最新バージョンでも同じかは不明です。
オプション
var swiper = new Swiper(".swiper", {
loop: true, // ループ有効
slidesPerView: "auto", // CSSを併用しカードのサイズを一定にする
speed: 7000, // ループの時間
allowTouchMove: false, // スワイプ無効
spaceBetween: 20, // スライド間の余白
autoplay: {
delay: 0, // ループ間のタイミングを0にして隙間をなくす
}
}
肝はloop: trueとslidesPerView: "auto"となります。
発生した問題
- Firefox 152.0.4でのみ、スクロール速度が遅くなり、3枚目あたりで追作カクつき、6枚目あたりで大きくカクつく
Safari/Chrome/Edgeでは問題が発生しませんでした。
状況的にカード単体や全体での横幅と、Swiper側でHTML等から算出した値に齟齬がある印象でした。
対応策
以下のいずれかでギリギリ許容範囲と判断できそうなところまで対応できました。
- カードの横幅を大きくする
- カードの枚数を増やす
横幅に関しては、6枚の場合は当初250px程度の横幅して指定を300px程度にすると、スピードやカクつきがかなり改善されました。
枚数に関しては、本来の6枚分のHMTLをコピーぺーストでもう一セット追加で並べることで、同様にスピードやカクつきがかなり改善されました。
HTMLやCSSやオプションを弄り回している間に、たまたまカードのサイズの記述をミスした際に多少改善したように見えたのがきっかけであり、ともかく幅を増やす方向で
CSSによるループスクロール
上記を参考にCSSのみでのループスクロールを試しましたが、対応案件ではSafariのちらつきが発生し、改善方法を見つけることができませんでした。
基本的には表示がSafariでも綺麗に表示できているようですが、何度もリロードしていると稀にこの参考ページでもちらつきが発生を確認した覚えがあり(再現できておらず不確定)、この手法自体がSafariでは問題があるのかもしれません。
結び
ブラウザ間で差異が発生することはだいぶ減っている印象ですが、今回は「あちらに対応すればこちらに問題が、こちらに対応すればあちらに問題が」という状態と想定外に大変になりました。
0人がこの記事を評価
役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。
連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。
