こんにちは。

Swiperのバージョンが8から9にアップデートされていますね！

公式サイトにバージョン8から9への移行ガイドが載っているのですが、実際に使ってみて「んんん？？」となったloopモードでのスライド数設定について書いておきたいと思います。

↓Swiper9への移行ガイドはこちら（公式サイト）

※本記事ではSwiperとは？や、基本的使用方法については割愛させていただきます。
外部サイトの記事が大変参考になりますので、文末に掲載させていただきます?

ベーシックなスライダーを実装します

本記事のデモでは、Swiperのeffectをslideと設定しています。横に複数画像が並ぶベーシックなスライダーになります。

以下動画のスライダーになります。他のeffectの動作についてはまだまだ見きれてないです。

JavaScript(以降jsと略して記述)の初期化設定はSwiper8の物をそのまま使用しても大丈夫そうでした。

ただ、loopモードのloopAdditionalSlidesは公式サイトを検索しても見つからず、仕様から消えた様子です。（設定が残っていてもエラーになったりはしない）

HTMLに表示させたいスライド数の２倍以上のswiper-slideの記述が必要

参考：Swiper8の場合

Swiper8ではjsの初期化でslidesPerViewを”3”と書いていたとしたら、HTMLのswiper-slideの記述は3つでloopモード動作ができていた・・・

↓Swiper8使用の場合のCodePenです。HTML内にある

    <div class="swiper-slide">

でスライドさせたい画像(imgタグ)を設定し、同様な記述を3つ書いている部分です。

See the Pen Swiper9 by na2factory(ななふ) (@na2factory) on CodePen.

※スマホではスライド数”1″になります。

※CodePenでSCSSになってますけど、簡単なネストしかしてないのでほぼCSSデス^^;

Swiper9の場合

同じHTMLで、Swiper9を使用すると動かないです。

この設定(slidesPerViewを”3”)では、HTMLのスライド数をslidesPerViewの2倍以上、つまり6つ以上記述すると正常に動作します。

Swiper9使用のCodePenを下に載せています。
CodePen内で3つスライダーを実装しており、一番上のスライドはHTMLのスライド数を6つにしています。※スマホではスライド数”1″になります。

2つ目はこれもよく見るタイプ、両端のスライドが欠けるタイプ。jsの初期化でslidesPerViewを”2.5″としています。※スマホではスライド数”1.5″になります。

この場合はHTMLのスライド数を6つだと、左端のスライドがパッと消えることがありました。HTMLのスライド数を7個にしたら左端が消える現象がなくなったので、slidesPerViewに小数点設定する場合は2倍プラス2個ぐらい必要なのかも？？

3つ目はHTMLのスライド数を3のままにしています。動作しないし、ページネーション等も表示されません。※スマホのスライド数も”3″にしてます。”1″にするとスマホでは動くので混乱しそうなので^^;

See the Pen Swiper9 by na2factory(ななふ) (@na2factory) on CodePen.

既にSwiper8で実装したサイトでバージョンアップすると、上記の違いから不具合になるケースが頻発しそう、、、Swiper8のままにしておいた方が安全な感じします。

Swiper9になったことで出来ることが増えているんだと思うんですが（公式サイトのSwiper Demos凄い)、ベーシックな使い方なら無理に最新版使用しなくてもいいのかな〜という感触でした。

Swiperについての参考記事

Swiper8向けですが、私がいつもお世話になっている参考記事はこちらです。

Swiper公式サイト

それでは、今回は以上になります。

ご訪問ありがとうございました！

---