如何阻止Swiper.JSThumbs自动转换？

我有一个用 react 制作的 swiper.js 滑块。如果我在 swiper 中有 8 个图像，然后我导航到第 8 个缩略图并单击第 7 个缩略图，它将向上滑动缩略图部分。有没有办法防止这种行为的发生？

我想要做的是让它仅在有更多可用的向上或向下滑动时才自动滑动。例如，如果我有 5 个缩略图并且幻灯片 [2, 3, 4, 5, 6] 是可见的，如果我选择幻灯片 6，它会移动并显示幻灯片 7 可用，如果我选择幻灯片 2 它会滑过并显示幻灯片 1. 这是我想让它做的唯一动作。该功能在文档中可用吗？

          <div className="mainSliderWrap">
            <Swiper
              pagination
              onSlideChange={swiper => {
                setImageSelectedIndex(swiper.activeIndex + 1)
                return true
              }}
              thumbs={{ swiper: thumbsSwiper }}>
              {products.images.map((product, index) => (
                <SwiperSlide key={product.originalSrc}>
                  <img
                    className={classes.mainSliderImg}
                    ref={el => {
                      imagesRef.current[index] = el as HTMLImageElement
                    }}
                    src={product.originalSrc}
                    data-zoom={product.originalSrc}
                    alt={product.title}
                    height={360}
                    width={360}
                  />
                </SwiperSlide>
              ))}
            </Swiper>
          </div>
          <div
            className={[
              "productSlider",
              ProductSliderOrientation(width) === "horizontal" &&
                "horizontalProductSlider"
            ].join(" ")}>
            <div className="swiper-button-next mainProdNext" />
            <div className="swiper-button-prev mainProdPrev" />
            <Swiper
              direction={ProductSliderOrientation(width)}
              touchRatio={1}
              threshold={10}
              slidesPerView={slidesPerView}
              spaceBetween={15}
              navigation={{
                nextEl: ".mainProdNext",
                prevEl: ".mainProdPrev"
              }}
              onSwiper={setThumbsSwiper}
              breakpoints={{
                0: {
                  spaceBetween: 10,
                  slidesOffsetBefore: 20,
                  slidesOffsetAfter: 20
                },
                576: {
                  spaceBetween: 10,
                  slidesPerView: 5
                },
                768: {
                  touchRatio: 0,
                  slidesPerView: 5
                },
                992: {
                  touchRatio: 1,
                  slidesPerView: 5
                },
                1200: {
                  touchRatio: 0,
                  slidesPerView: 5
                }
              }}>
              {products &&
                products.images.map(product => (
                  <SwiperSlide key={product.originalSrc}>
                    <ProductImage
                      image={product}
                      alt={products.title}
                      moduleClass={classes.productImagePick}
                      gatsbyImageClass={classes.productImagePickGatsby}
                    />
                  </SwiperSlide>
                ))}
            </Swiper>
          </div>
        </div>
      </div>