0

i want zoom image with multi slider like eCommerce product but react-image-zoom conflicting with react-slick 

import Slider from 'react-slick';
import ReactImageZoom from 'react-image-zoom';

class product extends Component {
render(){

var products = {
        slidesToShow: 1,
        slidesToScroll: 1,
        dots: false,
        arrows: true,
        fade: true
    };

const props = {
        width: 480,
        height:680,
        scale:0.8,
        zoomWidth:500,
        offset:{"vertical":0,"horizontal":10},
        img: "../../assets/images/fashion/product/1.jpg",
        zoomLensStyle:"opacity: 0.4;background-color: black;"
    };

return (
<Slider {...products} className="product-slick">
        <div>
           <ReactImageZoom {...props} />
        </div>
        <div>
           <ReactImageZoom {...props} />
        </div>
        <div>
           <ReactImageZoom {...props} />
        </div>
</Slider>)
  }
}

export default Product;

only last Slide image zoom working

anyone please Help, Thank You

Praveen Gopagani
  • 1
  • 5
  • based on your code, you only have one picture `1.jpg`, all three components are referring to the same one, can you first try using three pictures with different `props` settings? – windmaomao Dec 19 '18 at 14:50
  • the images come dynamically, and also test different props each component not last one picture zoom only working – Praveen Gopagani Dec 19 '18 at 17:16

0 Answers0