如何 zoom.in() 在按钮（React swiper）中？

Question

如何在 react version of swiper 中使用缩放方法？我只想放大一个按钮，缩小另一个按钮。

在简历中我想知道如何从其他兄弟组件放大和缩小 Swiper：

const MySwiper = () => {
return (
    <div>
      <button
        onClick={() => {
          // zoom out here ???
        }}
      >
        ZOOM OUT
      </button>
      <button
        onClick={() => {
          // zoom in here ???
        }}
      >
        ZOOM IN
      </button>
      <Swiper
        id="main"
        className="gallery-main"
        tag="section"
        zoom
        wrapperTag="ul"
      >
        {slides}
      </Swiper>
    </div>
  );
}

Answer 1

经过很长时间为此寻找解决方案后，我得到了以下结果。您可以使用 ref 为 Swiper 组件制作 zoom.in() 和 zoom.out()，如下所示：

const MySwiper = () => {

const ref = useRef(null) 

return (
    <div>
      <button
        onClick={() => {
          // zoom out here
          ref.current.swiper.zoom.out()
        }}
      >
        ZOOM OUT
      </button>
      <button
        onClick={() => {
          // zoom in here
          ref.current.swiper.zoom.in()
        }}
      >
        ZOOM IN
      </button>
      <Swiper
        ref={ref}
        id="main"
        className="gallery-main"
        tag="section"
        zoom
        wrapperTag="ul"
      >
        {slides}
      </Swiper>
    </div>
  );
}

但是你不能zoom.in像150%这样的特定缩放比例，或者像2这样的特定比例。你只能放大到Swiper的缩放属性上建立的最大比例（默认为3）或者缩小到最小比例（默认为 1）

如何 zoom.in() 在按钮（React swiper）中？

How to zoom.in() in a button (React swiper)?

javascript

reactjs

swiper

swiperjs

react-swiper