如何在反应中为滑动器创建自定义导航按钮？答案

【问题标题】：How to create custom navigation buttons for swiper in react?如何在反应中为滑动器创建自定义导航按钮？
【发布时间】：2023-02-14 19:27:48
【问题描述】：

Swiper React 在女巫中有一个文档，它没有解释如何添加自定义导航按钮。

我试过了，但没用

我使用的是 swiper 8.0.5

<Swiper
                modules={[Navigation, Pagination, Scrollbar, A11y]}
                spaceBetween={50}
                slidesPerView={1}
                onSlideChange={() => console.log('slide change')}
                onSwiper={(swiper) => console.log(swiper)}
                navigation={{
                    prevEl: '.prev',
                    nextEl: '.next',
                }}
                pagination={{ clickable: true }}
            >
                <SwiperSlide><img className="m-auto" src="/Images/Swiper/1.jpg" /></SwiperSlide>
                <SwiperSlide><img className="m-auto" src="/Images/Swiper/2.jpg" /></SwiperSlide>
                <SwiperSlide><img className="m-auto" src="/Images/Swiper/3.jpg" /></SwiperSlide>
                <SwiperSlide><img className="m-auto" src="/Images/Swiper/4.jpg" /></SwiperSlide>
                <SwiperSlide><img className="m-auto" src="/Images/Swiper/5.jpg" /></SwiperSlide>
            </Swiper>
        </div>

【问题讨论】：

标签： reactjs swiper.js

【解决方案1】：

这对我有用[swiper/react] 使用 React refs 的自定义导航/分页组件不起作用/可能吗？https://github.com/nolimits4web/swiper/issues/3855#issuecomment-982499163

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加更多详细信息，以帮助其他人了解这如何解决所提出的问题。你可以在in the help center找到更多关于如何写出好的答案的信息。

【解决方案2】：

您可以使用 react refs 添加自定义导航按钮，如下所示：

function MySwiper() {
  const prevRef = useRef(null);
  const nextRef = useRef(null);

  return (
    <>
      <Swiper
        modules={[Navigation, Pagination, Scrollbar, A11y]}
        spaceBetween={50}
        slidesPerView={1}
        onSlideChange={() => console.log("slide change")}
        onSwiper={(swiper) => console.log(swiper)}
        /*using the refs instead of className*/
        navigation={{
          prevEl: prevRef.current,
          nextEl: nextRef.current,
        }}
        pagination={{ clickable: true }}
      >
        {/*your slides here */}
      </Swiper>
      <button ref={prevRef}>previous</button>
      <button ref={nextRef}>next</button>
    </>
  );
}

但是，请记住 react ref 在第一次渲染时为 NULL。因此，如果您没有重新呈现组件的状态，按钮不会工作.我的解决方法是添加一个状态，该状态将在滑动器初始化时更新：

function MySwiper() {
  //Add a state that will force a re-render
  const [_, setInit] = useState();

  const prevRef = useRef(null);
  const nextRef = useRef(null);

  return (
    <>
      <Swiper
        /*using the refs instead of className*/
        navigation={{
          prevEl: prevRef.current,
          nextEl: nextRef.current,
        }}
        /*update state on swiper initialization*/
        onInit={() => setInit(true)}
      ></Swiper>
    </>
  );
}

【讨论】：