如何实现React中横向与纵向Swiper滑块的双向联动切换？

你需要实现两个Swiper滑块的双向同步：点击横向滑块的幻灯片时，纵向滑块切换到对应项；滑动纵向滑块时，横向滑块同步激活对应项。以下是具体实现步骤和修改后的代码：

核心实现思路 #

• 同时保存两个Swiper的实例，方便互相控制
• 给横向滑块的每个幻灯片添加点击事件，触发纵向滑块跳转至对应索引
• 监听纵向滑块的slideChange事件，同步横向滑块的激活位置
• 配置横向滑块的幻灯片可见性监听，确保激活项正确高亮

修改后的完整代码片段 #

import { useState } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/scrollbar';
import SwiperCore, { Scrollbar, Pagination, Navigation } from 'swiper';

// 注册需要的模块
SwiperCore.use([Scrollbar, Pagination, Navigation]);

// 假设你的list数据已定义
const list = [
  // 示例数据项，可替换为你的实际数据
  { id: 1, title: '步骤1', content: '内容1' },
  { id: 2, title: '步骤2', content: '内容2' },
  { id: 3, title: '步骤3', content: '内容3' },
];

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

  // 横向滑块点击事件：跳转到纵向对应索引
  const handleThumbClick = (index) => {
    if (mainSwiper && !mainSwiper.destroyed) {
      mainSwiper.slideTo(index);
    }
  };

  // 纵向滑块切换时，同步横向滑块的激活位置
  const handleMainSlideChange = () => {
    if (thumbsSwiper && !thumbsSwiper.destroyed) {
      const activeIndex = mainSwiper.activeIndex;
      thumbsSwiper.slideTo(activeIndex);
    }
  };

  return (
    <div className="app-container">
      {/* 横向滑块（顶部导航） */}
      <Swiper
        scrollbar={{ hide: true }}
        modules={[Scrollbar, Pagination, Navigation]}
        onSwiper={setThumbsSwiper}
        mousewheel={true}
        slidesPerView={4}
        watchSlidesProgress={true}
        watchSlidesVisibility={true}
        className="swiper-top"
      >
        {list.map((item, index) => (
          <SwiperSlide 
            key={item.id}
            onClick={() => handleThumbClick(index)}
          >
            <div className="d-flex flex-column items-center cursor-pointer">
              <span className="d-block bg-light rounded-full w-5 h-5 mx-auto "></span>
              <small className="d-block mb-0 mt-1">{item.title}</small>
            </div>
          </SwiperSlide>
        ))}
      </Swiper>

      {/* 纵向滑块（主内容区） */}
      <Swiper
        modules={[Pagination, Navigation]}
        slidesPerView={1}
        autoHeight={true}
        updateOnWindowResize={true}
        mousewheel={true}
        direction={'vertical'}
        className="swiper-main"
        onSwiper={setMainSwiper}
        onSlideChange={handleMainSlideChange}
      >
        {list.map((item) => (
          <SwiperSlide key={item.id}>
            {/* 你的Step组件，支持不同高度 */}
            <div className="p-4" style={{ minHeight: `${150 + index * 50}px`, backgroundColor: '#f5f5f5' }}>
              <h3>{item.title}</h3>
              <p>{item.content}</p>
            </div>
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
}

关键修改点说明 #

• 新增mainSwiper状态保存纵向滑块实例，用于横向滑块点击时控制跳转
• 给横向的SwiperSlide添加onClick事件，调用handleThumbClick方法，通过mainSwiper.slideTo(index)精准跳转到对应幻灯片
• 纵向滑块添加onSlideChange事件，触发handleMainSlideChange，通过thumbsSwiper.slideTo(activeIndex)同步横向滑块位置
• 横向滑块添加watchSlidesProgress和watchSlidesVisibility配置，确保当前激活的幻灯片自动添加swiper-slide-visible和swiper-slide-active类，方便样式高亮
• 移除了原代码中的Thumbs模块依赖，因为这里需要的是双向同步控制，而非缩略图的默认关联逻辑

内容的提问来源于stack exchange，提问作者user3178479