SwiperJS自定义导航按钮点击切换并更新内容实现方案咨询

先指出你代码里的关键问题：

• navigation配置里的prevEl和nextEl不能复用同一个组件，Swiper需要区分上/下页的触发元素
• 导航按钮不该放在SwiperSlide内部，否则每个幻灯片都会生成按钮，不符合全局导航的逻辑

下面是实现点击切换需要用到的Swiper API和修正方案：

核心API方法 #

实现幻灯片切换最直接的是调用Swiper实例的两个方法：

• slidePrev()：切换到上一张幻灯片，可传参数设置动画时长（如slidePrev(300)）
• slideNext()：切换到下一张幻灯片，同样支持动画参数

方案一：自定义按钮+手动调用API（推荐） #

通过useSwiper钩子获取Swiper实例，给自定义按钮绑定点击事件：

import { Swiper, SwiperSlide, useSwiper } from 'swiper/react';
import { Navigation } from 'swiper/modules';
import 'swiper/css';

// 自定义导航按钮组件
const CustomNavButton = ({ direction, children }) => {
  const swiper = useSwiper();
  
  const handleSwitch = () => {
    direction === 'prev' ? swiper.slidePrev() : swiper.slideNext();
  };

  return (
    <button onClick={handleSwitch} className="custom-nav-btn">
      {children}
    </button>
  );
};

// 轮播组件
const VerticalCarousel = ({ slice }) => {
  return (
    <div className="carousel-wrap">
      <Swiper
        direction='vertical'
        modules={[Navigation]}
      >
        {slice?.items.map((item) => (
          <SwiperSlide key={item.unique_id} className='swiper-slide'>
            <div>
              {/* 幻灯片内容 */}
              <p>{item.answer_field_1}</p>
              <p>{item.answer_field_2}</p>
            </div>
          </SwiperSlide>
        ))}
      </Swiper>
      {/* 全局导航按钮，放在Swiper外部 */}
      <CustomNavButton direction="prev">上一张</CustomNavButton>
      <CustomNavButton direction="next">下一张</CustomNavButton>
    </div>
  );
};

export default VerticalCarousel;

方案二：利用Swiper内置Navigation模块 #

如果想复用Swiper自带的导航逻辑（比如自动禁用边界按钮），可以给navigation配置传入真实DOM选择器：

import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';

const VerticalCarousel = ({ slice }) => {
  return (
    <div className="carousel-wrap">
      <Swiper
        direction='vertical'
        modules={[Navigation]}
        navigation={{
          prevEl: '.carousel-prev',
          nextEl: '.carousel-next'
        }}
      >
        {slice?.items.map((item) => (
          <SwiperSlide key={item.unique_id} className='swiper-slide'>
            <div>
              <p>{item.answer_field_1}</p>
              <p>{item.answer_field_2}</p>
            </div>
          </SwiperSlide>
        ))}
      </Swiper>
      <button className="carousel-prev">上一张</button>
      <button className="carousel-next">下一张</button>
    </div>
  );
};

这种方式下，Swiper会自动给按钮绑定切换逻辑，无需手动写点击事件。

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