在Slick滑块中实现缩放功能

<div class="slider">
  <div><img src="image1.jpg" alt="Image 1"></div>
  <div><img src="image2.jpg" alt="Image 2"></div>
  <div><img src="image3.jpg" alt="Image 3"></div>
</div>

$('.slider').slick();

$('.slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  // 获取当前滑块的图片元素
  var currentImage = $(slick.$slides[currentSlide]).find('img');
  
  // 还原之前缩放的样式
  currentImage.css({
    'transform': 'scale(1)',
    'transition': 'none'
  });
});

$('.slider').on('afterChange', function(event, slick, currentSlide){
  // 获取当前滑块的图片元素
  var currentImage = $(slick.$slides[currentSlide]).find('img');
  
  // 添加缩放的样式
  currentImage.css({
    'transform': 'scale(1.2)',
    'transition': 'transform 0.3s ease-in-out'
  });
});