在光滑的旋转木马前面带来图像

我创建了一个图像的旋转木马/滑块，带有slick，现在我想增加悬停时图像的大小。在光滑的旋转木马前面带来图像

当我尝试这样做时，图像被光滑的容器截断。我怎样才能把图像放在前面，这样我就可以看到整个事物？我尝试使用z-index，但它不起作用。

JSFiddle我的代码。以下是有问题悬停行为的屏幕截图。

我想要什么：

2016-12-20 edo

被隐藏的溢出是什么阻止缩放图像完全显示。但是你不能简单地显示溢出，因为这会导致隐藏的幻灯片显示。

你需要做的是克隆传送带外的缩放图像。这是一个工作JSFiddle

$(".zoom-it").mouseenter(function(){ 
    var $this = $(this); 
    var position = $this.offset(); 
    $this.clone() 
     .addClass('scaled') 
     .insertAfter($(".my-slider")) 
     .css({left: position.left, top: position.top}); 
}); 

$(document).on('mouseleave', ".zoom-it.scaled", function(){ 
    $(this).remove(); 
});

有了更新的CSS

.zoom-it.scaled { 
    transform: scale(2); 
    position: absolute; 
}

这将克隆悬停图像，放置在顶部的缩放版本，当鼠标离开它删除。

来源

2016-12-20 20:55:51 ffork

这解决了我的问题，但一个快速的观察：用这种方法，你不能再点击并拖动图像移动到旋转木马中的下一个/上一个图像。 – edo

问题是华而不实添加overflow:hidden到包含您的图片光滑滑块类。

您可以通过添加这对你的CSS重写此：

.my-slider > div { 
    overflow:visible; 
}

编辑：

我不好，你应该做的

.my-slider > div { 
    overflow-y:visible; 
}

使隐藏的图像将留隐患。

来源

2016-12-20 20:17:03

如果我尝试转盘游 - 现在我可以看到所有的隐藏的幻灯片（图片）在转盘上溢出右边。 – edo

修复了这个问题。它应该现在工作 –

我仍然没有看到整个图像与'overflow-y：可见'。相反，我得到了旋转木马的滚动条（在Firefox和Chrome中尝试过）。 [图像]（http://imgur.com/a/4L91K）。 – edo

产生所需功能的另一个解决方案是向div封装添加填充添加到最外层的传送带容器。经过几个小时的努力之后，就解决了这个问题。希望这可以帮助某人。

.carousel类名> DIV { 填充：20像素20像素0像素0像素 }

来源

2017-05-14 01:56:15

在光滑的旋转木马前面带来图像

回答

相关问题