Swiper.js滑块中动态更新上/下一页导航元素的问题

以下是我用Swiper.js实现的滑块代码：

<Swiper
    loop={true}
    slidesPerView={1.25}
    freeMode={true}
    centeredSlides={true}
    spaceBetween={30}
    keyboard={true}
    modules={[
      Keyboard,
      Navigation,
    ]}
    navigation={{
      nextEl: '.swiper-slide-next',
      prevEl: '.swiper-slide-prev',
    }}
    breakpoints={{
      1024: {
        slidesPerView: 2.125,
      },
      768: {
        slidesPerView: 1.5,
      },
    }}
    onSlideChange={(swiper) => {
      /******************************** 
        THIS DOESN'T WORKS 
      ********************************/
      swiper.navigation.nextEl = document.querySelector('.swiper-slide-next') as HTMLElement
      swiper.navigation.prevEl = document.querySelector('.swiper-slide-prev') as HTMLElement
    }}
  >
    {slides.map(slide => (
      <SwiperSlide key={slide.id}>
        ...
      </SwiperSlide>
    ))}
  </Swiper>

当前Swiper会自动为滑块添加/更新.swiper-slide-next（红色）和.swiper-slide-prev（绿色）类，但swiper.navigation.nextEl和swiper.navigation.prevEl这两个DOM元素对象并未同步更新。尝试通过onSlideChange事件手动赋值也无效。

解决方案 #

核心原因 #

Swiper初始化阶段会根据navigation.nextEl/prevEl的选择器一次性获取DOM元素并绑定事件，后续不会自动重新查询更新。直接修改swiper.navigation.nextEl的方式不符合Swiper内部逻辑，因此无效。

正确实现方式 #

方案1：手动绑定滑块点击事件（用滑块触发切换）

移除初始化时的navigation配置，改为通过点击事件调用Swiper API切换滑块：

1. 移除Swiper组件的navigation配置：

<Swiper
  loop={true}
  slidesPerView={1.25}
  freeMode={true}
  centeredSlides={true}
  spaceBetween={30}
  keyboard={true}
  modules={[Keyboard, Navigation]}
  breakpoints={{
    1024: { slidesPerView: 2.125 },
    768: { slidesPerView: 1.5 },
  }}
>
  {slides.map(slide => (
    <SwiperSlide key={slide.id} onClick={(e) => {
      const swiper = e.currentTarget.closest('.swiper').swiper;
      const targetSlide = e.currentTarget;
      // 判断点击的是prev还是next滑块，执行对应切换
      if (targetSlide.classList.contains('swiper-slide-next')) {
        swiper.slideNext();
      } else if (targetSlide.classList.contains('swiper-slide-prev')) {
        swiper.slidePrev();
      }
    }}>
      ...
    </SwiperSlide>
  ))}
</Swiper>

2. （可选）用事件委托优化（适合大量滑块场景）：

import { useEffect } from 'react';

// 在组件内添加监听
useEffect(() => {
  const swiperContainer = document.querySelector('.swiper');
  if (!swiperContainer) return;

  const handleSlideClick = (e) => {
    const slide = e.target.closest('.swiper-slide');
    if (!slide) return;

    const swiper = swiperContainer.swiper;
    if (slide.classList.contains('swiper-slide-next')) {
      swiper.slideNext();
    } else if (slide.classList.contains('swiper-slide-prev')) {
      swiper.slidePrev();
    }
  };

  swiperContainer.addEventListener('click', handleSlideClick);
  return () => swiperContainer.removeEventListener('click', handleSlideClick);
}, []);

方案2：使用自定义导航按钮（推荐）

如果不需要用滑块本身作为触发元素，推荐使用独立的导航按钮，Swiper会自动管理按钮的可用状态：

<Swiper
  // 其他配置不变
  navigation={{
    nextEl: '.custom-swiper-next',
    prevEl: '.custom-swiper-prev',
  }}
>
  {slides.map(slide => (
    <SwiperSlide key={slide.id}>
      ...
    </SwiperSlide>
  ))}
</Swiper>

{/* 自定义导航按钮 */}
<button className="custom-swiper-next">下一页</button>
<button className="custom-swiper-prev">上一页</button>

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