Swiperの無限スライダー作成時のloop使用における、最後のスライドから最初のスライドへ繋がる時空白ができて表示が遅くなる

前提

swiperを使用しスライダーを作っています。
４枚のスライドを使用し、中央に３枚、４枚目は両端に半分ずつ切れた状態で表示しています。
slidesPerView: 4で４枚表示としています。
centeredSlidesを使用し１枚目が中央に来るようにすることで４枚目を両端切れ表示しています。
autoplayで5秒おきにスライドが動くようにしています。

実現したいこと

４枚目のスライドの後ろに１枚目のスライドがすぐに来るように、loopで途切れずに無限ループさせたいと思っています。

発生している問題・エラーメッセージ

loopを使っていても４枚目スライドの後ろのスペースが見えるようになるまで動くと空白となってしまい、４枚目が左の半分まで到達したと同時に後ろの１、２、３枚目のスライドが表示されるようになります。
（表示されるのがだいぶ遅い）

該当のソースコード

Javascript

試したこと

slidesPerView: autoや loopAdditionalSlides: 2,など、
無限スライダーについてやloopバグなどに関する情報を調べ試してみましたが空白部分ができてしまい、表示されるまで遅くなってしまうケースの解決方法は見つけることができませんでした。

Cocode

2022/10/03 17:26 編集

SwiperにかかわるHTMLとCSSもご提供いただければ幸いです…！画像はこちら https://placehold.jp/ をお使いください！１）「Advanced」の設定項目を調整・サイズ・画像に表示するテキスト（それぞれ１、２、３、４にしたらいいと思います）・背景色もそれぞれ変えていただけると見やすくて助かります２）画像を生成するをクリック３）imgタグの画像のパスを、生成したURLに書き換えるバグを再現したいのです。

Cocode

2022/10/04 04:12

> １枚目が中央に来るようにすることで４枚目を両端切れ表示しています。 1枚目が中央に来るように開始したら (3) 4 1 2 (3) と、3が両端切れになるような気がします。 4が両端切れでした、 (4) 1 2 3 (4) と、2が中央スタートでしょうか？ひとまず回答欄で後者の方でご提案させていただいておりますが、HTMLが違和感あるので、前者の方が良さそうです。

行動規範の内容に同意します

回答1件

ベストアンサー

どんなレイアウトがご希望かあまり理解できていなくて申し訳ありません…想像で作ってみました。
こんな感じの見た目で大丈夫でしょうか？

コード例

動作確認サンプル：https://jsfiddle.net/5w3fk0yc/

javascript
1const swiper = new Swiper('.swiper', {
2  autoplay: {
3    delay: 5000,
4  },
5  centeredSlides: true, // アクティブ中の画像中央寄せ
6  centeredSlidesBounds: true, // スライド同士の余白をなくす
7  loop: true,
8  slidesPerView: 1.5, // アクティブ画像1枚まるまる、サブ画像2枚はチラ見せ
9});

css
1body {
2  margin: 0;
3  padding: 0;
4}
5
6h1 {
7  text-align: center;
8}
9
10img {
11  width: 100%;
12  margin: 0;
13  padding: 0;
14  vertical-align: bottom;
15}
16
17.swiper {
18  width: 100%;
19  /* ↓↓↓大きい画面でブラウザ最大化された時の対策 */
20  max-width: 1500px;
21  margin: 0 auto;
22  overflow: hidden;
23}

html
1<!-- Swiper CDN -->
2<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
3<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
4
5<h1>Swiper Test</h1>
6
7<!-- Slider main container -->
8<div class="swiper">
9  <div class="swiper-wrapper">
10    <div class="swiper-slide">
11      <img src="https://placehold.jp/005A5B/ffffff/600x300.png?text=1" alt="1">
12    </div>
13    <div class="swiper-slide">
14      <img src="https://placehold.jp/007369/ffffff/600x300.png?text=2" alt="2">
15    </div>
16    <div class="swiper-slide">
17      <img src="https://placehold.jp/008C72/ffffff/600x300.png?text=3" alt="3">
18    </div>
19    <div class="swiper-slide">
20      <img src="https://placehold.jp/02A676/ffffff/600x300.png?text=4" alt="4">
21    </div>
22  </div>
23</div>

またはこちらの見た目でしょうか？

動作確認サンプル：https://jsfiddle.net/5w3fk0yc/3/

javascript
1const swiper = new Swiper('.swiper', {
2  autoplay: {
3    delay: 4000,
4  },
5  centeredSlides: true,
6  centeredSlidesBounds: true,
7  loop: true,
8  slidesPerView: 3.5,
9});

1を中央ではなく左から開始するために、HTMLで画像の順番を２→３→４→１にしています。
CSSは1つ目のスライダーと共通です。

centeredSlidesBounds
If true, then active slide will be centered without adding gaps at the beginning and end of slider. Required centeredSlides: true. Not intended to be used with loop or pagination
trueのとき、アクティブ状態のスライドが両隣の隙間なしに中央に配置されます。centeredSlidesがtrueであることが必須です。このパラメーターはループやページネーションには作用しません。

（公式ドキュメントより引用）

とありますので、質問者様の隙間もこれで消えてくれないかな…と期待しています。

投稿2022/10/03 18:46

編集2022/10/03 23:18

Cocode

総合スコア2314