在光滑的旋轉木馬前面帶來圖像

我創建了一個圖像的旋轉木馬/滑塊，帶有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

在光滑的旋轉木馬前面帶來圖像

回答

相關問題