如何在懸停時放大 Slick Slider 中的幻燈片項目？

Question

我不知道是否可能，但我正在嘗試放大 Slick Slider (kenwheeler.github.io/slick/) 的幻燈片。

我嘗試了很多方法但都沒有成功，它要么只是放大並漂浮在其他幻燈片的頂部。 我想如果我嘗試使用 jQuery 調整幻燈片項目的大小，當主幻燈片變大時，它會推動旁邊的幻燈片。

基本上，我需要它來做一些類似於 Netflix 的事情，當鼠標懸停在項目頂部時，它會放大並推動旁邊的幻燈片。 鼠標離開后，它只是動畫恢復正常。 任何幫助，將不勝感激。

Answer 1

檢查以下線程。 關於您的查詢的討論。 https://github.com/akiran/react-slick/issues/649

Answer 2

我知道這是一個老問題，但作為參考，這可以輕松完成。 來源： https : //help.groupthought.com/article/390-zoom-magnify-product-image-on-hover

/* -- Javascript - touch hover effect for product pages -- */
var isTouching = false;
window.addEventListener('touchstart', function(){
  document.documentElement.classList.remove('mouse');
  document.documentElement.classList.add('touch');
  isTouching = true;
});
  
window.addEventListener('mousemove', function(){
  if(isTouching) isTouching = false
  else
  {
    document.documentElement.classList.remove('touch');
    document.documentElement.classList.add('mouse');
  }
});
/* - end - */

/* -- style code for touch zoom and un-zoom when using Javascript -- */
.slick-slide img:hover {
  transition: transform .5s; 
  transform: scale(1.5);   
}
/* - end - */