反应中容器外部的滑动按钮

Question

如何在 React js 中在容器外部制作 swiper nav？

到

Answer 1

你可以用这个

方法1

//add custom btns in some inner comp
 <i className="icon-arrow-long-right review-swiper-button-next"></i>
 <i className="icon-arrow-long-left review-swiper-button-prev"></i>

接下来是 swiper comp

<Swiper
    navigation={{
      nextEl: '.review-swiper-button-next',
      prevEl: '.review-swiper-button-prev',
    }}
 >
  </Swiper>

或者你用这种方式

方法2

// some-inner-component.jsx
import { React } from 'react';
import { useSwiper } from 'swiper/react';

export default function SlideNextButton() {
  const swiper = useSwiper();

  return (
    <button onClick={() => swiper.slideNext()}>Slide to the next slide</button>
  );
}

更多信息： https: //swiperjs.com/react#use-swiper

享受 ;）