así que este es mi problema. Uso react-slick para deslizamiento móvil que está envuelto con react-zoom-pan-pinch TransformWrapper y TransformComponent . Este es mi código:

 export default class MobileZoomImageSlider extends Component { constructor(props) { super(props); } render() { const settings = { dots: true, arrows: false, infinite: false, slidesToShow: 1, slidesToScroll: 1, speed: 500, swipeToSlide: true, swipe: true, } return (<Slider {...settings}> {this.props.data?.map((image, index) => ( <div key={index} className="main-image"> <TransformWrapper> <TransformComponent> <img src={clientConfig.IMAGE_PATH_L + image + clientConfig.IMAGE_FORMAT} alt="" /> </TransformComponent> </TransformWrapper> </div> ))} </Slider>); } }

Entonces, el problema es que cuando envuelvo la imagen con Transform - s, la imagen se puede ampliar pero no deslizar. Necesito que sea ampliable y deslizable. Si envuelvo el componente llamado así:

 <TransformWrapper> <TransformComponent> <MobileZoomImageSlider data={variantProducts[selectedProductId]?.images} /> </TransformWrapper> </TransformComponent>

Luego, la imagen se amplía sin cesar. Y además no se desliza.

Probé otros paquetes de zoom, pero me dijeron que usara react-zoom-pan-pinch .