【问题标题】:integration owl carousel + easyzoom集成猫头鹰轮播+easyzoom
【发布时间】:2015-02-18 05:35:53
【问题描述】:

我正在尝试使用 owl2 carousel 和 easyzoom (http://i-like-robots.github.io/EasyZoom/)

在这个页面你可以找到结果http://www.youdev.net/example/owl-easyzoom.html

在第一个例子中只有easyzoom。在图像中的鼠标悬停时,光标发生变化,缩放图像被加载,我可以在它上面移动。这是我想要得到的结果。

在第二个中,有基本的猫头鹰轮播代码+轻松缩放。在鼠标悬停时,方向发生变化,缩放图像已加载,但我无法在缩放图像上移动,它总是被拉伸。

我认为owl carousel总是强制图像的尺寸,所以没有缩放效果。有人知道如何解决这个问题吗?

【问题讨论】:

  • 如果您不阅读标签说明,您不太可能让合适的人查看您的问题。这不是关于 OWL,Web 本体语言 (owl),而是关于 Owl Carousel (owl-carousel)。如果您添加一个语言标签 (javascript),有时还添加一个库标签 (jquery),通常会有所帮助。

标签: javascript jquery owl-carousel


【解决方案1】:

我遇到了同样的问题,但我想我正在使用另一个轮播。

我通过在easyzoom.css 中为.easyzoom img.easyzoom.is-ready img 添加width: auto; 来修复:

.easyzoom img {
    vertical-align: bottom;
    width: auto;
}

.easyzoom.is-ready img {
    cursor: crosshair;
    width: auto;
}

最好, 埃德

编辑

刚刚检查了您的代码,并像这样解决了:

.easyzoom img {
    display: block;
    width: auto !important;
}

【讨论】:

    猜你喜欢
    • 2014-10-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-12-07
    • 2021-12-09
    • 2018-05-15
    • 1970-01-01
    相关资源
    最近更新 更多