Swiperのメモ

個人的メモなのでいろいろ省きます。

前提

• Swiper v5.4.1を使用
• CDNではなくダウンロードして用いる

動作を停止する

<script>
var swiper = new Swiper('.swiper-container', {
  loop: true,
  //以下略
});
//以下を追加
swiper.autoplay.stop();
</script>

表示がおかしかったり、いろいろと手を加えるときに動いていると確認が面倒な場合があります。そんな時はdelayを長く設定するよりもswiper.autoplay.stop();書いて動作を停止したほうが楽かもしれません。

Safariのswiper.min.js.mapエラー

the server responded with a status of 404 () "swiper.min.js.map"

CDNではなくダウンロードして用いる場合、上記のエラーがでる可能性があります。どうやらswiper.min.js(またはswiper.js)の末尾にある以下のソースマップ用URLを探しに行った結果を表示している模様です。

//# sourceMappingURL=swiper-bundle.min.js.map

つまりこの404エラー解消方法は以下のいずれかになります。

• swiper.min.js.mapもサーバーにアップする
• swiper.min.jsからsourceMappingURLの一文を削除する

Swiperのjs自体をデバックする必要があれば別ですが、通常はまず触らないと思いますので、sourceMappingURLの削除が候補にあがるかもしれません。

スマホサイズでスライダーを切り替える

いくつか方法が考えられると思いますが、とりあえず3種類。

• 全て背景画像にして、メディアクエリで切り替える
• スホマサイズかそれ以外のどちらか一方をimg要素で構築し、他方を背景画像で構築して、メディアクエリで切り替える
• スライダー用HTMLを2つ並べ、そのHTML自体をメディアクエリで切り変える

全てを背景画像にすれば、サイズや画像の見せ方(background-sizeの利用など)ができるためかなり楽に対応できます。
反面そのままでは画像の読み込みタイミングや非同期化はできないため、必要な場合はそれようにJSを作成する必要があります。

背景画像とimg要素の併用は、img要素を用いた方にdecoding属性やloading属性を設定するなど多少の融通が効きます。

img要素にすると非同期化は容易にできます。しかしCSSのみではスマホとそれ以外の2つ分の画像を読み込むため無駄が多くなります。
ただし、動画を扱う場合はimg要素を使う形の方がシンプルに構築できます。もちろん背景画像を使うパターンでも該当のスライドだけ動画をという形にすればできますが。

パフォーマンスは横に置いて、「CSSが使えない状態でも見えているべき画像はimg要素で構築する」という基本に立ち返るなら、2つスライダーを並べる形にせざるを得ないとも考えられます。
もっとも、どちらかをメインにと考えるならば背景画像とimg要素の併用が最善かもしれませんが。

結び

しばらくぶりに触っていますがほとんど覚えていないので初心者の気分です。