如何在React中使用Swiper JS实现滑块内文本可选中？

你遇到的文本无法选中问题确实和Swiper的默认设置有关：为了优化滑动体验、避免交互冲突，Swiper默认会给组件加上user-select: none规则禁止文本选中，部分场景下也会添加pointer-events: none限制元素交互。

方案1：全局放开选中权限（实现最简单） #

直接通过CSS覆盖Swiper的默认规则即可，无需修改组件配置：

.swiper-slide {
  /* 允许文本选中 */
  user-select: text;
  /* 恢复元素的指针事件响应 */
  pointer-events: auto;
}

如果担心全局修改影响其他Swiper组件，可以给当前Swiper添加自定义类名限定作用范围：

<Swiper
  className="text-selectable-swiper"
  spaceBetween={50}
  slidesPerView={3}
>
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
  <SwiperSlide>Slide 3</SwiperSlide>
  <SwiperSlide>Slide 4</SwiperSlide>
</Swiper>

对应CSS调整为：

.text-selectable-swiper .swiper-slide {
  user-select: text;
  pointer-events: auto;
}

方案2：仅允许指定区域选中（体验最优，推荐使用） #

如果需要保留滑块的滑动功能，同时避免选中文本时误触发滑块切换，可以使用Swiper官方提供的noSwiping能力：

• 给Swiper组件添加noSwiping={true}属性
• 给滑块内部需要支持选中文本的区域添加swiper-no-swiping类名
  示例代码如下：

<Swiper
  spaceBetween={50}
  slidesPerView={3}
  noSwiping={true}
>
  <SwiperSlide>
    <div className="swiper-no-swiping">Slide 1 此处文本可正常选中</div>
  </SwiperSlide>
  <SwiperSlide>
    <div className="swiper-no-swiping">Slide 2 此处文本可正常选中</div>
  </SwiperSlide>
  <SwiperSlide>
    <div className="swiper-no-swiping">Slide 3 此处文本可正常选中</div>
  </SwiperSlide>
  <SwiperSlide>
    <div className="swiper-no-swiping">Slide 4 此处文本可正常选中</div>
  </SwiperSlide>
</Swiper>

该方案下，用户在带swiper-no-swiping类的区域滑动不会触发滑块切换，可正常选中文本；在滑块其余空白区域滑动仍可正常切换滑块，兼顾两种交互需求。

方案3：修改Swiper默认交互配置 #

如果以上方案都不生效，可以在Swiper组件上添加以下配置，关闭默认的交互拦截逻辑：

<Swiper
  spaceBetween={50}
  slidesPerView={3}
  touchStartPreventDefault={false}
  preventClicks={false}
  preventClicksPropagation={false}
>
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
  <SwiperSlide>Slide 3</SwiperSlide>
  <SwiperSlide>Slide 4</SwiperSlide>
</Swiper>

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