React中如何禁用Swiper鼠标滑动并保留箭头导航功能

只需给<Swiper>组件添加allowTouchMove={false}属性，就能禁用鼠标滑动（包括触摸滑动），仅保留箭头点击切换的功能：

<Swiper 
  onSwiper={(s) => { props.setSwiper(s); }} 
  navigation={true} 
  className="mySwiper" 
  initialSlide={props.initialWindowNum} 
  onSlideChange={(swiperCore) => { 
    const { activeIndex } = swiperCore; 
    setCookie('WindowNumber', activeIndex.toString(), 300) 
  }}
  allowTouchMove={false} // 新增：禁用触摸/鼠标滑动
>
    <SwiperSlide>
        <Chart {...props} chartTo={chartTo} chartTitle="Chart1" chartData={props.chartData1} />
    </SwiperSlide>

    <SwiperSlide>
        <Chart {...props} chartTo={chartTo} chartTitle="Chart2" chartData={props.chartData2} />
    </SwiperSlide>

    <SwiperSlide>
        <Chart {...props} chartTo={chartTo} chartTitle="Chart3" chartData={props.chartData3} />
    </SwiperSlide>
</Swiper>

allowTouchMove是Swiper的核心属性，设为false后会完全关闭所有通过触摸或鼠标拖动触发的滑动行为，不会影响导航箭头的点击交互。

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