Trying to make a simple carousel with an associated thumbs carousel under it:

    // Thumbs
    const galleryThumbs = new Swiper(thumbsElement, {
      spaceBetween: 10,
      slidesPerView: 4,
      scrollbar: true,
      breakpoints: {
        768: {
          slidesPerView: 8,
        },
      },
    });

    // Slides
    const galleryTop = new Swiper(top, {
      spaceBetween: 10,
      effect: "fade",
      loop: true,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      multipleActiveThumbs: false,
      thumbs: {
        swiper: galleryThumbs,
      },
    });

This is working as described, but I have a problem:

When one scrolls to the next image using the navigation arrows, and the corresponding thumbnail is out of sight, the thumbnails scroll in group(by the amount described in the slidesPerView setting). I'm looking for a way for it to scroll just by one, as it does when scrolling with the back arrow.