2023.11.10 追記

Lightning および VK Blocks のアップデートにより組み込まれている Swiper のバージョンが 11.* になりました。
これにより、カルーセルを正常に動作させるために最低必要なスライド数が 同時表示スライド数 + 1 と条件がかなり緩くなりました。

例えば、5枚のスライドを同時表示するカルーセルに最低必要なスライドの数が6枚になりました。

スライドの枚数の制約事項が増えた

VK Blocks が 1.56.0.0 にアップデートされて、Swiper のバージョンが 6.8.0 から 9.2.3 に変わったことにより、スライダーブロックでカルーセルを作るときに注意しないといけないことがあります。

対馬

いままでのバージョンだと気にしなくてもよかったんですけど...

Swiper API のページ https://swiperjs.com/swiper-api#param-longSwipesMs によると、ループモードに以下の仕様が追加されています。

Because of nature of how the loop mode works (it will rearrange slides), total number of slides must be >= slidesPerView * 2

https://swiperjs.com/swiper-api#param-longSwipesMs

つまり、一度に表示するスライドアイテムの数 の2倍以上の枚数のスライドを用意しないと正常動作しない、ということです。

2倍の枚数でもダメな場合もある

アクティブスライドを中央にする場合はさらにスライドの枚数が必要です。

例えば、一度に表示するスライドアイテムの数が 5 で、「アクティブスライドを中央にする」が有効だと12枚以上のスライドが必要です。

スライドが10枚だと最初のスライド時に左側のスライドが消えてしまいます。

アクティブスライドを中央にする が無効だと、10枚でも正常動作します。

VK Blocks のスライダーブロックのカルーセル動作に必要なスライド数

以下に実際の例を載せますので、PC でページを再読み込みして動作をご覧ください。
動作がわかりやすいように、スライド番号をつけてあります。

「アクティブスライドを中央にする」が無効の場合

10枚のスライドで正常に動作します。

スタッフ①
スタッフ②
スタッフ③
スタッフ④
スタッフ⑤
スタッフ⑥
スタッフ⑦
スタッフ⑧
スタッフ⑨
スタッフ⑩

「アクティブスライドを中央にする」が有効の場合

スライドが10枚だと、最初のスライド時に左側のスライドが消えてしまいます。その後もスライドが消えることがあります。

スタッフ①
スタッフ②
スタッフ③
スタッフ④
スタッフ⑤
スタッフ⑥
スタッフ⑦
スタッフ⑧
スタッフ⑨
スタッフ⑩

「アクティブスライドを中央にする」が有効の場合②

スライドの枚数を12枚にすると正常動作します。

スタッフ①
スタッフ②
スタッフ③
スタッフ④
スタッフ⑤
スタッフ⑥
スタッフ⑦
スタッフ⑧
スタッフ⑨
スタッフ⑩
スタッフ⑪
スタッフ⑫

そんなにたくさんスタッフがいない場合は

例えば、スタッフが7名しかいない、って会社の場合、この Swiper の仕様は困ってしまいますよね。

そんなときには、スライドを複製して同じ7枚のスライドのセットを2組つなげて14枚のスライドを作るしかなさそうです。

同じ7枚のスライドのセットを2組つなげて14枚のスライドを作る

サイト運営者プロフィール

対馬 俊彦
対馬 俊彦魚沼情報サービス (新潟県南魚沼市)
WordPress を使用したサイト制作・カスタマイズを全国どこからでも承ります。ベクトルが販売している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン「VK Blocks」「VK Filter Search」のカスタマイズを得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

このサイトで行っているカスタマイズのやり方の多くもマンツーマンのオンラインレッスン形式などでわかりやすく説明させていただくことができますので、興味がある方はご連絡ください。

* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・PHP・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

また、制作業者様のサイト制作のお手伝いも数多く行っております。いま人手が足りない、ちょっとここだけコーディングを頼みたい、等々… お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り(無料)を提示させていただきますので、お気軽にお問い合わせください。

» ご相談・お問い合わせはこちらからどうぞ