为什么点击滑动按钮时我的两个react-swiper组件会同步触发滑动？

问题原因 #

两个Swiper组件的导航配置都使用了全局通用类选择器.next和.prev，Swiper初始化时会全局匹配所有符合类名的元素绑定导航事件，所以点击任意一个按钮都会触发两个Swiper的滑动动作，修改组件ID不生效是因为你没有将导航选择器和对应组件做唯一绑定。

解决方法 #

给每个组件的导航按钮设置唯一类名，再对应修改Swiper的navigation配置即可，修改示例如下：

1. 修改Promotion-Slider.js #

• 调整Swiper的navigation配置，使用唯一类名：

<Swiper
    loop={true}
    breakpoints={offerSliderBreakpoints}
    navigation={{
        nextEl: ".promotion-next",
        prevEl: ".promotion-prev",
    }}
>

• 对应修改底部两个按钮的类名，添加唯一标识：

// 上一页按钮
<div className="prev promotion-prev cursor-pointer absolute top-2/4 -left-4 md:-left-5 z-10 -mt-4 md:-mt-5 w-8 h-8 md:w-9 md:h-9 rounded-full bg-white shadow-xl border border-gray-200 border-opacity-70 flex items-center justify-center text-gray-800 transition-all duration-200 hover:bg-primary hover:text-white hover:border-primary" role="button">

// 下一页按钮
<div className="next promotion-next cursor-pointer absolute top-2/4 -right-4 md:-right-5 z-10 -mt-4 md:-mt-5 w-8 h-8 md:w-9 md:h-9 rounded-full bg-white shadow-xl border border-gray-200 border-opacity-70 flex items-center justify-center text-gray-800 transition-all duration-200 hover:bg-primary hover:text-white hover:border-primary" role="button">

2. 修改FlashDealsProducts.js #

• 调整Swiper的navigation配置，使用唯一类名：

<Swiper
    id="flash-deals"
    loop={true}
    breakpoints={SliderBreakpoints}
    navigation={{
        nextEl: ".flash-deals-next",
        prevEl: ".flash-deals-prev",
    }}
>

• 对应修改底部两个按钮的类名，添加唯一标识：

// 上一页按钮
<div className="prev flash-deals-prev cursor-pointer absolute top-2/4 -left-4 md:-left-5 z-10 -mt-4 md:-mt-5 w-8 h-8 md:w-9 md:h-9 rounded-full bg-white shadow-xl border border-gray-200 border-opacity-70 flex items-center justify-center text-gray-800 transition-all duration-200 hover:bg-primary hover:text-white hover:border-primary" role="button">

// 下一页按钮
<div className="next flash-deals-next cursor-pointer absolute top-2/4 -right-4 md:-right-5 z-10 -mt-4 md:-mt-5 w-8 h-8 md:w-9 md:h-9 rounded-full bg-white shadow-xl border border-gray-200 border-opacity-70 flex items-center justify-center text-gray-800 transition-all duration-200 hover:bg-primary hover:text-white hover:border-primary" role="button">

额外优化建议 #

SwiperCore.use([Navigation])只需在项目入口文件（如main.js、App.js）全局引入一次即可，不需要在每个使用Swiper的组件中重复声明。

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