Currently, I’m integrating Swiper version 11.1.1 into my Laravel 11 project. I aim to integrate a thumbnail gallery loop using the documentation provided thumbnail gallery loop. I’ve managed to set everything up in Laravel, but I’m encountering one issue. When I have 5 images to display and set slidesPerView to 4, the fifth thumbnail doesn’t hide; it still displays. How can I hide the extra image when slidesPerView is set to 4?

Here is the relevant code snippet from my .blade.php file:

<div class="swiper"> 
    <div class="swiper-wrapper" >
        @foreach ($images as $image)
        <div class="swiper-slide">
            <img src="{{ $image->name }}" />
        </div>
        @endforeach
    </div>

    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

<div class="swiper-thumbs">
    <div class="swiper-wrapper">
        @foreach ($images as $image)
        <div class="swiper-slide">
            <img src="{{ $image->name }}" />
        </div>
        @endforeach
    </div>
</div> 

and this in on my app.js code

import Swiper from 'swiper';
import { Navigation, Pagination, Thumbs } from 'swiper/modules';
import 'swiper/css/bundle';

const thumbsSwiper = new Swiper('.swiper-thumbs', {
    slidesPerView: 4,
    spaceBetween: 6,
    loop: true,
    freeMode: true,
    loopedSlides: 4,  
    watchSlidesVisibility: true,
    watchSlidesProgress: true,
});
  
const mainSwiper = new Swiper('.swiper', {
    modules: [Navigation, Pagination, Thumbs],
    loop: true,
    pagination: {
        el: '.swiper-pagination',
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    thumbs: {
        swiper: thumbsSwiper,
    },
});

And here’s how it displays when there are more than 4 images:

Could someone please assist me with the correct code for this issue?