React中Swiper JS缩略图与活跃幻灯片不同步问题求助

问题说明 #

需要实现带缩略图的轮播组件，核心需求是控制主轮播的导航按钮放置在缩略图区域，参考官方示例后未成功实现。

关键问题分析 #

当前代码的核心问题：

• 错误地给缩略图Swiper添加了navigation={true}，导致导航按钮归属于缩略图轮播而非主轮播
• 未正确实现将主轮播的导航控制绑定到自定义位置的按钮上

解决方案步骤 #

1. 分离主轮播与缩略图的控制关系：
   • 主轮播禁用默认导航，通过onSwiper获取实例
   • 缩略图轮播作为主轮播的缩略图导航，保持联动逻辑
2. 手动创建导航按钮：在缩略图轮播的容器旁添加自定义导航按钮
3. 绑定导航事件：通过主轮播实例的slidePrev()和slideNext()方法实现切换

完整代码示例 #

import { useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Thumbs } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/thumbs";

const Reviews = () => {
  const [thumbsSwiper, setThumbsSwiper] = useState(null);
  const [mainSwiper, setMainSwiper] = useState(null);

  return (
    <div className="reviews">
      {/* 主轮播 */}
      <Swiper
        onSwiper={setMainSwiper}
        loop={true}
        spaceBetween={10}
        thumbs={{ swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null }}
        modules={[Navigation, Thumbs]}
        className="mySwiper"
      >
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-1.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-2.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-3.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-4.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-5.jpg" />
        </SwiperSlide>
      </Swiper>

      {/* 缩略图区域（包含导航按钮） */}
      <div className="thumbs-container">
        <button 
          className="swiper-prev" 
          onClick={() => mainSwiper?.slidePrev()}
          disabled={!mainSwiper}
        >
          ←
        </button>
        <Swiper
          onSwiper={setThumbsSwiper}
          loop={true}
          centeredSlides={true}
          slidesPerView={5}
          spaceBetween={10}
          watchSlidesProgress={true}
          slideToClickedSlide={true}
          modules={[Thumbs]}
          className="mySwiper2"
        >
          <SwiperSlide>
            <img src="https://swiperjs.com/demos/images/nature-1.jpg" />
          </SwiperSlide>
          <SwiperSlide>
            <img src="https://swiperjs.com/demos/images/nature-2.jpg" />
          </SwiperSlide>
          <SwiperSlide>
            <img src="https://swiperjs.com/demos/images/nature-3.jpg" />
          </SwiperSlide>
          <SwiperSlide>
            <img src="https://swiperjs.com/demos/images/nature-4.jpg" />
          </SwiperSlide>
          <SwiperSlide>
            <img src="https://swiperjs.com/demos/images/nature-5.jpg" />
          </SwiperSlide>
        </Swiper>
        <button 
          className="swiper-next" 
          onClick={() => mainSwiper?.slideNext()}
          disabled={!mainSwiper}
        >
          →
        </button>
      </div>

      {/* 样式调整 */}
      <style jsx>{`
        .reviews {
          max-width: 800px;
          margin: 0 auto;
        }
        .mySwiper {
          height: 400px;
          margin-bottom: 20px;
        }
        .thumbs-container {
          display: flex;
          align-items: center;
          gap: 10px;
        }
        .swiper-prev, .swiper-next {
          padding: 8px 12px;
          border: none;
          background: #333;
          color: white;
          cursor: pointer;
          border-radius: 4px;
        }
        .swiper-prev:disabled, .swiper-next:disabled {
          opacity: 0.5;
          cursor: not-allowed;
        }
        .mySwiper2 {
          flex: 1;
          height: 100px;
        }
        .mySwiper2 .swiper-slide {
          opacity: 0.5;
        }
        .mySwiper2 .swiper-slide-thumb-active {
          opacity: 1;
          border: 2px solid #333;
        }
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      `}</style>
    </div>
  );
};

export default Reviews;

核心要点说明 #

• 使用onSwiper获取主轮播实例，通过实例方法slidePrev()/slideNext()实现自定义导航
• 缩略图轮播保持watchSlidesProgress和slideToClickedSlide属性，确保点击缩略图切换主轮播
• 通过CSS调整缩略图激活态样式，提升交互体验
• 给导航按钮添加disabled属性，避免在Swiper未初始化时触发错误

内容的提问来源于stack exchange，提问作者Md. Rakibul hasan