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枚のスライドを作るしかなさそうです。