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

Question

How can I use zoom methods in the react version of swiper? I just want to make zoom in on one button and zoom out on another one.

In resume I want to know how to zoom in and zoom out on Swiper from other sibling component:

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>
  );
}

score 1 · Accepted Answer · answered Jun 21 '21 at 12:10

After a long time searching a solution for this I got the following. You can make zoom.in() and zoom.out() using a ref for Swiper component as follows:

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>
  );
}

But you cannot zoom.in a particular percentage of zoom like 150%, or a particular ratio like 2. You can only zoom into the max ratio established on the zoom prop of Swiper (3 by default) or zoom out to the min ratio (1 by default)

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

1 Answers1