VK Blocks 1.56.0.0 のスライダーのカルーセル動作に必要なスライド数

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

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枚でも正常動作します。

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

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

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

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

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

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

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

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

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

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

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

対馬 俊彦魚沼情報サービス (新潟県南魚沼市)

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、お手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

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

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

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

≫メールでのお問い合わせはこちら

最新の投稿

この著者の記事一覧

• カスタマイズ2024年11月24日マウスホバーでボタンにアニメーション
• カスタマイズ2024年11月22日カラムレイアウトで写真を左右反転して使う TIPS
• Lightning G32024年9月2日マウスホバーでグローバルナビの文字が切り替わるカスタマイズ例④
• Lightning G32024年8月30日マウスホバーでグローバルナビの文字が切り替わるカスタマイズ例③