将图像放在光滑的旋转木马前面

Question

我使用slick创建了一个旋转木马/图像滑块，现在我想在悬停时增加图像的大小。

当我尝试这样做时，图像被光滑的容器切断。如何将图像放在前面，这样我才能看到整个图像？我尝试使用z-index，但它不起作用。

JSFiddle我的代码。这是一个有问题的悬停行为的屏幕截图。

我想要的是什么：

Answer 1

问题在于，将overflow:hidden添加到包含图像的光滑滑块类中。

你可以通过将它添加到你的css来覆盖它：

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

修改

我的坏，你应该做

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

因此隐藏的图像将保持隐藏状态。

Answer 2

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

您需要做的是将缩放图像克隆到旋转木马之外。这是一个有效的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;
}

这将克隆悬停的图像，将缩放版本置于顶部，并在鼠标离开时将其移除。

Answer 3

另一种产生所需功能的解决方案是将div填充添加填充添加到最外面的轮播容器中。只是在经过几个小时的挣扎之后解决这个问题。希望这有助于某人。

.carousel-class-name＆gt; div {     填充：20px 0px 20px 0px }