javascriptのスワイパーで空白になる

Question

実現したいこと

JavaScriptのSwiperで、画像4枚、表示する枚数3枚で自動スワイプしたい。

前提

JavaScriptで、画像4枚、表示する枚数3枚で、自動スワイプされる機能を作成しています。
イメージは下記です。

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

画像を4枚挿入しているのに、
画像を3枚表示にすると、１つ空白ができて正常に動作しない。

HTMLソースコード

<!-- Swiper-スワイパー -->
        <div class="eyecatch">
            <div class="swiper">
                <!-- Additional required wrapper -->
                <div class="swiper-wrapper">
                    <!-- Slides -->
                    <div class="swiper-slide"><img src="https://placehold.jp/1000x1000.png" alt=""></div>
                    <div class="swiper-slide"><img src="https://placehold.jp/1000x1000.png" alt=""></div>
                    <div class="swiper-slide"><img src="https://placehold.jp/1000x1000.png" alt=""></div>
                    <div class="swiper-slide"><img src="https://placehold.jp/1000x1000.png" alt=""></div>
                    
    
                </div>
                <!-- If we need navigation buttons -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            
                <!-- If we need scrollbar -->
                <div class="swiper-scrollbar"></div>
            </div>
            <!-- If we need pagination -->
            <div class="swiper-pagination"></div>
        </div>

PerViewの数は、画像*2より大きい数でないといけないという記事を見たので
試しに、画像を12枚にすると、正常動作となりました。
ただ、12枚の場合、同じ画像は4枚しか使用しないため、ページネーションも4にしたいんです。

HTMLソースコード

<!-- Swiper-スワイパー -->
        <div class="eyecatch">
            <div class="swiper">
                <!-- Additional required wrapper -->
                <div class="swiper-wrapper">
                    <!-- Slides -->
                    <div class="swiper-slide"><img src="https://placehold.jp/1000x1000.png" alt=""></div>
                    <div class="swiper-slide"><img src="https://placehold.jp/1000x1000.png" alt=""></div>
                    <div class="swiper-slide"><img src="https://placehold.jp/1000x1000.png" alt=""></div>
                    <div class="swiper-slide"><img src="https://placehold.jp/1000x1000.png" alt=""></div>
                    <div class="swiper-slide"><img src="https://placehold.jp/1000x1000.png" alt=""></div>
                    <div class="swiper-slide"><img src="https://placehold.jp/1000x1000.png" alt=""></div>
                    <div class="swiper-slide"><img src="https://placehold.jp/1000x1000.png" alt=""></div>
                    <div class="swiper-slide"><img src="https://placehold.jp/1000x1000.png" alt=""></div>
                    <div class="swiper-slide"><img src="https://placehold.jp/1000x1000.png" alt=""></div>
                    <div class="swiper-slide"><img src="https://placehold.jp/1000x1000.png" alt=""></div>
                    <div class="swiper-slide"><img src="https://placehold.jp/1000x1000.png" alt=""></div>
                    <div class="swiper-slide"><img src="https://placehold.jp/1000x1000.png" alt=""></div>
    
                </div>
                <!-- If we need navigation buttons -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            
                <!-- If we need scrollbar -->
                <div class="swiper-scrollbar"></div>
            </div>
            <!-- If we need pagination -->
            <div class="swiper-pagination"></div>
        </div>

空白を消す方法、スライドは12の場合でももしくはページネーションを4つにする方法がございましたらご教授ください。

該当のソースコード

/* スワイパー */
const swiper = new Swiper('.swiper', {
    // Optional parameters
    speed: 600, // スライドの切り替えスピード
    loop: true,
    loopAdditionalSlides: 1,
    followFinger: false,
    slidesPerView: 1,
    spaceBetween: 40,
    centeredSlides: true,  // スライドを中央寄せにする
    autoHeight: true,
    gradCursor: true,
    autoplay: {
        delay: 3000,//1秒後にスライド
        disableOnInteraction: false,//ユーザーアクション後の自動再生を続ける
    },
    allowTouchMove: true,
    breakpoints: {767:{slidesPerView:3,spaceBetween:10}},
    
    // If we need pagination
    pagination: {
      el: '.swiper-pagination',
      type: 'bullets',
      clickable: true,
      dynamicBullets: true,
      dynamicMainBullets: 4,
    },
  
    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  
    // And if we need scrollbar
    scrollbar: {
      el: '.swiper-scrollbar',
    },
});

試したこと

4枚から12枚にしたり、
ページネーションのdynamicBullets: true,やdynamicMainBullets: 4,を使用してみましたが意図したものではありませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[Lhankor_Mhy]

バージョン8以前であれば動作すると思いますが、それではダメということですよね？

[shinya117]

ご回答ありがとうございます。
そうなんですね。バージョン8以前であれば動作するのは初めて知りました。
ありがとうございます。

現在のバージョンは10ですので、10で意図した動作ができるのが一番理想的ですが、不可能であれば
8以前でも、意図した動作が実現できれば大丈夫です。
10では難しいでしょうか？

Answer 1

ちょっとアドホックな方法になりますし、クリックした時の挙動が変ですが、画像を8枚置いて以下はどうでしょうか。

.swiper-pagination-bullet-active+.swiper-pagination-bullet+.swiper-pagination-bullet+.swiper-pagination-bullet+.swiper-pagination-bullet {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

.swiper-pagination-bullet:nth-child(-n+4) {
    display: none;
}

pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true,
    // dynamicBullets: true,
    // dynamicMainBullets: 4,
},

---

または、bullet を諦めて、こうするとどうでしょうか。

pagination: {
    el: '.swiper-pagination',
    type: 'custom',
    clickable: true,
    renderCustom: function (swiper, current, total) {
        switch (current % 4) {
            case 1:
                return `●〇〇〇`;
            case 2:
                return `〇●〇〇`;
            case 3:
                return `〇〇●〇`;
            case 0:
                return `〇〇〇●`;
        }
    }
},

Comments

[shinya117]

とても画期的な発想をご提供していただきありがとうございます。
おかげさまで意図した動作ができました。
ありがとうございました！