Instalé react-zoom-pan-pinch y entra en conflicto con react-slick porque react-zoom-pan-pinch tiene flex . Entonces, cuando cargo diapositivas usando react-slick , maximiza la imagen infinitamente (supongo). Este es un ejemplo de código:

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

Esto debe funcionar si width <= 767 . Todo funciona correctamente sin TransformWrapper y TransformComponent , pero esta es la tarea.

Dentro de este componente <MobileZoomImageSlider /> está Slider. Aquí está el 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, touchThreshold: 150, speed: 1000, responsive: [ { breakpoint: 767, settings: { slidesToShow: 1 } } ] } return (<Slider {...settings}> {this.props.data?.map((image, index) => ( <div key={index} className="main-image" > <img src={clientConfig.IMAGE_PATH_L + image + clientConfig.IMAGE_FORMAT} alt="" /> </div> )) } </Slider>); } }

Si envuelvo con TransformWrapper y TransformComponent <img src {clientConfig.IMAGE_PATH_L + image + clientConfig.IMAGE_FORMAT} alt="" /> No está haciendo zoom en la imagen infinitamente PERO slick-slider no se está deslizando.

Si hay alguna forma de desactivar la flex de estos Transformers , háganmelo saber.