React中实现点击按钮让Swiper JS返回第一页的方法问询

Swiper并没有直接提供回到第一页的props配置，核心思路是获取Swiper实例并调用其内置的滑动方法，下面分两种常用的React Swiper组件场景说明：

一、使用官方 swiper/react 组件（推荐） #

1. 首先通过useRef创建一个引用，用来获取Swiper实例：

import { useRef } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';

function MySwiper() {
  const swiperRef = useRef(null);

2. 将这个ref绑定到<Swiper>组件上：

return (
    <>
      <Swiper ref={swiperRef} {/* 你的其他Swiper配置，比如slidesPerView等 */}>
        <SwiperSlide>第一页内容</SwiperSlide>
        <SwiperSlide>第二页内容</SwiperSlide>
        <SwiperSlide>第三页内容</SwiperSlide>
      </Swiper>

3. 编写点击事件处理函数，调用Swiper实例的slideTo方法（第一页的索引是0）：

<button onClick={() => {
        // 可选链操作符避免实例未初始化时报错
        swiperRef.current?.slideTo(0);
        // 如果需要自定义动画时长，可加第二个参数，比如slideTo(0, 500)，单位毫秒
      }}>回到第一页</button>
    </>
  );
}

二、使用旧版 react-id-swiper 组件 #

如果你的项目用的是旧的react-id-swiper，获取实例的方式略有不同：

import { useRef } from 'react';
import ReactSwiper from 'react-id-swiper';
import 'react-id-swiper/lib/styles/css/swiper.css';

function MySwiper() {
  const swiperRef = useRef(null);

  const goToFirstSlide = () => {
    // 这里需要通过current.swiper拿到真正的Swiper实例
    if (swiperRef.current) {
      swiperRef.current.swiper.slideTo(0);
    }
  };

  return (
    <>
      <ReactSwiper ref={swiperRef} {/* 你的配置项 */}>
        {/* 轮播内容 */}
      </ReactSwiper>
      <button onClick={goToFirstSlide}>回到第一页</button>
    </>
  );
}

关键注意点 #

• 确保在调用slideTo方法时，Swiper实例已经完成初始化，所以用?.或者if判断避免报错
• slideTo的第一个参数是目标轮播项的索引，第一页固定为0；第二个可选参数是滑动动画的时长，默认使用Swiper配置里的speed值

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