フリーランスWebデザイナー・ななふの
デザイン、コーディングの勉強記録やTIPSなど

SwiperのVersion9はloopモードのスライド数設定に注意

当ブログはアフィリエイト広告を利用しています。
HTML/CSS
スポンサーリンク
【PR】おすすめの本

管理人が買って良かった一冊を紹介します!

Webデザイナーのお仕事が具体的に分かる!デザイン勉強中の人は読んで損なしの一冊。
¥2,497 (2024/11/12 17:28時点 | 楽天市場調べ)
\楽天ポイント4倍セール!/
楽天市場
\商品券4%還元!/
Yahooショッピング

こんにちは。

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

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

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

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

スポンサーリンク

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

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

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

使用したSwiperのバージョンは9.0.5になります。
※2023/4/14時点で最新は9.2.0のようなので、もし動作違っていたらすみません。

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

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

スポンサーリンク

HTMLに表示させたいスライド数の2倍以上の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つ以上記述すると正常に動作します。

ページ送りの矢印やページネーション(スライダー下に表示されているドット部分)も、HTMLのスライド数が足りないと表示されないので「どうして??」と焦ります!

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公式サイト

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

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


コメント