How can I enlarge an slide item in Slick Slider on hover?

Question

I don't know if it's possible, but I'm trying to enlarge a slide for Slick Slider (kenwheeler.github.io/slick/).

I tried many ways but not successful, it either just zooms in and float on top of the other slides. I would think if I tried resizing using jQuery the slide item it would push the slides next to it when the main slide gets bigger.

Basically, I need it to do something like in Netflix, when mouse hovers on top of the item it would enlarge pushing the slides next to it. After mouse leave, it just animates back to normal. Any help would be appreciated.

Answer 1

Check the below thread. There is an discussion about your query. https://github.com/akiran/react-slick/issues/649

Answer 2

I know is an old question but for reference this can be done easily. Source: 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 - */