如何停止Swiper.JS拇指自动转换？

Question

我有一个在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>

Answer 1

如果不操纵数据，就无法使用此行为实现缩略图。所以我的想法是，当你改变一个缩略图时，你需要重新排序数据，以便显示下一个/上一个拇指。

export default function App() {
  const [thumbsSwiper, setThumbsSwiper] = useState(null);

  const [data, setData] = useState([
    "https://swiperjs.com/demos/images/nature-1.jpg",
    "https://swiperjs.com/demos/images/nature-2.jpg",
    "https://swiperjs.com/demos/images/nature-3.jpg",
    "https://swiperjs.com/demos/images/nature-4.jpg",
    "https://swiperjs.com/demos/images/nature-5.jpg",
    "https://swiperjs.com/demos/images/nature-6.jpg",
    "https://swiperjs.com/demos/images/nature-7.jpg",
    "https://swiperjs.com/demos/images/nature-8.jpg",
    "https://swiperjs.com/demos/images/nature-9.jpg",
    "https://swiperjs.com/demos/images/nature-10.jpg"
  ]);

  return (
    <>
      <Swiper
        style={{
          "--swiper-navigation-color": "#fff",
          "--swiper-pagination-color": "#fff"
        }}
        loop={false}
        spaceBetween={10}
        navigation={true}
        thumbs={{ swiper: thumbsSwiper }}
        className="mySwiper2"
        onSlideChange={(e) => {
          if (e.realIndex % 3 === 0) {
            // move first element to the end
            const newData = [...data];
            newData.push(newData.shift());
            setData(newData);
            e.slideTo(e.realIndex - 1);
          }
          if (e.realIndex === 0) {
            // move last element to the beginning
            const newData = [...data];
            newData.unshift(newData.pop());
            setData(newData);
            e.slideTo(e.realIndex + 1);
          }
        }}
      >
        {data.map((img) => (
          <SwiperSlide key={img}>
            <img src={img} />
          </SwiperSlide>
        ))}
      </Swiper>
      <Swiper
        onSwiper={setThumbsSwiper}
        loop={false}
        loopedSlides={1}
        spaceBetween={10}
        slidesPerView={4}
        freeMode={false}
        watchSlidesVisibility={true}
        watchSlidesProgress={true}
        className="mySwiper"
      >
        {data.map((img) => (
          <SwiperSlide key={img}>
            <img src={img} />
          </SwiperSlide>
        ))}
      </Swiper>
    </>
  );
}

这是一个codesandbox

这只是一个快速示例。我希望它能对你有所帮助。