reactjs - react-slick 与 react-image-zoom 冲突图像缩放不起作用
问题描述
我想要使用像电子商务产品这样的多滑块缩放图像,但是 react-image-zoom 与 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;
只有最后一张幻灯片图像缩放工作
有人请帮忙,谢谢
解决方案
推荐阅读
- botframework - 如何在 bot 框架 v3 C# 中使用更新消息活动
- c# - 用对象数组替换字符串
- php - 安装后出现 Mcamara\LaravelLocalization\Exceptions\SupportedLocalesNotDefined 错误
- kubernetes - kubernetes 命令检查 pod 进入终止状态后经过了多长时间
- go - Printf 函数以不同方式显示结构
- vb.net - 将字符串转换为 REG_BINARY
- neo4j - 来自 SQL Server 的 Neo4J ETL:从视图导入
- r - 存储来自 for 循环的多个结果
- javascript - ejs:找不到包含文件
- react-native - 如何从 react-native 中的另一个组件打开 Modal